Geek Answers Handbook

Dynamically change CSS background image

What I'm looking for is a way to get my HTML header tag to change background images every few seconds. Any solutions are welcome if it is not difficult.

I have this code right now, as well as links to jQuery:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

 $(function() { var header = $('.mainHeader); var backgrounds = new Array( 'url(img/rainbow.jpg), 'url(img/chickens_on_grass.jpg) 'url(img/cattle_on_pasture.jpg) 'url(img/csa_bundle.jpg) ); var current = 0; function nextBackground() { header.css('background,backgrounds[current = ++current % backgrounds.length]); setTimeout(nextBackground, 10000); } setTimeout(nextBackground, 10000); header.css('background, backgrounds[0]); });

My html header:

<header class="mainHeader"></header>

And CSS:

 .mainHeader { background: no-repeat center bottom scroll; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 150px; padding-top: 2%; font-size: 100%; }

Right now I now have a background image in general.

+10
javascript jquery html css
source share
5 answers
 <html> <head> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function(){ var header = $('body'); var backgrounds = new Array( 'url(http://placekitten.com/100)' , 'url(http://placekitten.com/200)' , 'url(http://placekitten.com/300)' , 'url(http://placekitten.com/400)' ); var current = 0; function nextBackground() { current++; current = current % backgrounds.length; header.css('background-image', backgrounds[current]); } setInterval(nextBackground, 1000); header.css('background-image', backgrounds[0]); }); </script> </head> <body> <header></header> </body> </html>
+5
source share

Made some corrections to your code

DEMO: http://jsfiddle.net/p77KW/

 var header = $('body'); var backgrounds = new Array( 'url(http://placekitten.com/100)' , 'url(http://placekitten.com/200)' , 'url(http://placekitten.com/300)' , 'url(http://placekitten.com/400)' ); var current = 0; function nextBackground() { current++; current = current % backgrounds.length; header.css('background-image', backgrounds[current]); } setInterval(nextBackground, 1000); header.css('background-image', backgrounds[0]);

The biggest change (as noted in other comments) is that you should use the apostrophe ** '** s, not these funky open and closed single quotes, and that your array is incorrect.

With these fixes, I simplified a few things:

  • The current increment then take the module (I know that this is basically what you did, but how much easier it is to debug ;) )
  • Target background-image directly
  • Used by setInterval() instead of double calling setTimeout
+17
source share

You can get the same technique using HTML / CSS. Only 1. putting images in the "img" tag in HTML, surrounded by a "div wrapper" and setting it to: relative and div img wrapper in position: absolute, For full size / full height you can use percentages or potentially "background-size: cover "(not marked), and then call the CSS animation to dynamically change images.

Or 2. you can add multiple images to the background in CSS, separated by commas, apply the background-size: cover, and use the CSS animation again to change the background.

Here's an example , as well as Mozilla CSS3 animation documentation

+4
source share

You cannot delimit JavaScript strings with ' characters. You must use " or ' .

+1
source share

It should be late, but it can help another. For this purpose, in some situations, I prefer to use a jquery plugin called tcycle, which has only a few lines of code and supports only a gradual transition, but it works smoothly even with large images.

Setting up a slide show with tcycle is simple and can even be done using declarative markup, for example

 <div class="tcycle"> <img src="p1.jpg"> <img src="p2.jpg"> </div>

The trick can be donde using css z-index: -1 to div the container and set the width and height to 100%

Homepage for downloading and checking other examples Malsup jQuery Plugins

0
source share

More articles:


All Articles