rotating images used as backgrounds with 100% width and height_问答_开发者

rotating images used as backgrounds with 100% width and height

开发者 https://www.devze.com 2023-03-21 07:12 出处：网络

How can I have rotating background images that expand/contra开发者_开发知识库ct if the browser window is expanded/contracted?

Does anyone know a script that does this? Or would there be a way with just CSS?

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.

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 ...