Dynamically Changing CSS Background Image

Question

What I'm looking for is a way to make my HTML header tag change background images every few seconds. Any solutions are welcome, as long as it is not to complex.

I have this code right now as well as linking 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 have now background image at all.

Your array is wrong... there's a few commas missing..

gvee
– gvee

2014-02-13 16:45:54 +00:00
Commented Feb 13, 2014 at 16:45 — gvee
– gvee, Commented Feb 13, 2014 at 16:45
quote strings are wrong too. jsfiddle.net/4LFnK

amsross
– amsross

2014-02-13 16:48:37 +00:00
Commented Feb 13, 2014 at 16:48 — amsross
– amsross, Commented Feb 13, 2014 at 16:48

gvee · Accepted Answer · 2014-02-13 16:54:12Z

21

Made a few amendments 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]);

Biggest changes (as noted in others comments) is that you have to use apostrophe**'**s, not those funky open and close single-quotes and that your array wasn't correct.

With these corrections out of the way I simplified a few things:

Increment current then take modulus (I know this is basically what you did but how much easier is that to debug ;))
Target background-image directly
Used setInterval() instead of a double call to setTimeout

answered Feb 13, 2014 at 16:54

gvee

17.2k42 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

CW Design Over a year ago

Thanks for your help so far, but nothing is working yet. I copied and pasted your code into my page inside my script tags. Also tageted background-image like you said. Still I get no image at all, it makes no sense.

gvee Over a year ago

@CWDesign can you try it with the PlaceKitten links?

CW Design Over a year ago

Yes I did, just like you had it.

gvee Over a year ago

@CWDesign any errors in the console? Can you give us a link?

gvee Over a year ago

It appears to work. You have to wait a while but it does work. The delay is caused by waiting for the images to load. Once loaded the code seems to run just fine; agreed?

|

truleighsyd · Accepted Answer · 2014-07-15 17:15:52Z

5

You could acheive this same technique with HTML/CSS Only by 1. placing images within an "img" tag in your HTML surrounded by a "div wrapper" and setting it to position:relative and div wrapper img's to position:absolute. For full-width/full-height you can use percentages or potentially "background-size:cover" (haven't checked) and then call a CSS animation to change the images dynamically.

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

Here's an example and also Mozilla CSS3 Animation Documentation

answered Jul 15, 2014 at 17:15

truleighsyd

3013 silver badges9 bronze badges

2 Comments

John Mikic Over a year ago

This is a real solution here, HTML/CSS only solution is always preferable to added JavaScript! Thank you.

Eddie Over a year ago

Can you expand on #2, what . css is there to actually rotate/change the stacked background images?

sopanha · Accepted Answer · 2014-02-14 04:54:14Z

4

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

answered Feb 14, 2014 at 4:54

sopanha

3453 silver badges11 bronze badges

6 Comments

CW Design Over a year ago

Thanks guys I got it working now thanks for all your help. One more thing though. Can I get this: var header = $('header'); to call a class instead of the element. I want to apply to my HTML5 <header class="mainheader">?

CW Design Over a year ago

Figured out the class thing everything seems to be working great thanks again for all your help, really appreciate it.

nicholaswmin Over a year ago

@CWDesign can you please change the accepted answer since this guy seems to have copied/pasted the anwswer from the user below?

Rommel Paras Over a year ago

How do I allow for a smooth transition when the background changes?

fat_mike Over a year ago

@RommelParas I would create and set the background-image to a direct child of body with z-index: -1 and play with opacity while changing the background image of the new container.

|

Quentin · Accepted Answer · 2014-02-13 16:44:40Z

1

You can't delimit JavaScript strings with ‘ characters. You must use " or '.

answered Feb 13, 2014 at 16:44

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

2 Comments

rvighne Over a year ago

@daekano I hope you're joking.

daekano Over a year ago

@rvighne Of course I am :P It's rare that you see those kinds of quotes anywhere outside of Word, in my experience.

Farid Silva Aboid · Accepted Answer · 2014-11-01 15:59:30Z

-1

It must be late but may help to another one. For this goal in some situations I prefer to use a jquery plugin named tcycle which have only a few lines of code and supports just fade transition, but it works smoothly even with large images.

Setting up a slideshow with tcycle is easy and even could be done with declarative markup such as

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

The trick could be donde using css z-index:-1 for container div and setting width and height to 100%

Homepage for downloading and check for other examples is Malsup jQuery plugins

answered Nov 1, 2014 at 15:59

Farid Silva Aboid

911 silver badge10 bronze badges

1 Comment

Rohit Gupta Over a year ago

This is a terrible idea. It would load all the images first.

Collectives™ on Stack Overflow

Dynamically Changing CSS Background Image

5 Answers 5

10 Comments

2 Comments

6 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

10 Comments

2 Comments

6 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related