CODEWITHSUNDEEP
phpjavascriptjqueryhtmlcss
javi
javi

Reputation: 91

rotating images used as backgrounds with 100% width and height

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?

Upvotes: 0

Views: 929

Answers (2)

jfriend00
jfriend00

Reputation: 708156

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.

Upvotes: 1

Mihai Iorga
Mihai Iorga

Reputation: 39724

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

Upvotes: 0

Related Questions