rotating images used as backgrounds with 100% width and height
Question
How can I have rotating background images that expand/contract if the browser window is expanded/contracted?
Does anyone know a script that does this? Or would there be a way with just CSS?
2 answers
solution1
1 2011-07-17 05:55:00
There's a jQuery plugin called SuperSized: http://buildinternet.com/project/supersized/ and the plugin handles all cross browser compatibility for you and will swap images at the time interval of your choosing if you want.
Or, the HTML5 way to do this (only supported in some browsers like Chrome): http://jsfiddle.net/jfriend00/vzYrf/
html {
background: url(http://photos.smugmug.com/photos/344291068_HdnTo-XL.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Or two more ways to do it yourself: Perfect Full Page Background Image .
solution2
0 2011-07-17 06:20:19
it's simple:)
some css:
<style type="text/css">
html { height: 100%; overflow:hidden;}
body { background-color: transparent; margin: 0px; padding: 0px; height: 100%; border-top: 1px transparent solid; margin-top: -1px; z-index:0; position:relative; }
img#background { height: 100%; width: 100%; z-index: -1; position:absolute; color: black; }
</style>
you can play with these values...
and body content:
<body bgcolor="#000300" style="margin:0px; width:100%"> <img id="background" src="background.jpg" alt="My Background" /> </body>
this is for 1 background, the rest you can do with javascript...
<script type="text/javascript">
function changeBackground(){
var backgrounds = ['back1.jpg', 'back2.jpg', 'back3.jpg'];
var inRandom = Math.floor(Math.random() * backgrounds.length);
document.getElementById('background').src = backgrounds[inRandom];
setTimeout ( "changeBackground()", 10000 );
}
setTimeout ( "changeBackground()", 10000 );
</script>
I didn't test the script, but this is basically the idea...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.