Grow your CSS skills. Land your dream job.

Change Body Background Every 10 sec

  • # April 5, 2013 at 6:28 pm

    Hey All,

    I would like to Change the Body Background Every 10 sec and i have already something that does that…
    but it’s not working at all the monitors (i guess not the wide-screen) and what i have also it’s kinda heavy

    I just need a simple jquery code or something simpler to change the background image every 10 sec

    # April 5, 2013 at 9:18 pm

    Ugh.

    1. Read this: http://css-tricks.com/perfect-full-page-background-image/
    2. Then look into CSS keyframs
    3. Then go here: http://prefixr.com/

    # April 5, 2013 at 10:53 pm

    what does it had to do with what i’m asking?

    i want like a slideshow of the body, i want that every 10 seconds the body of the css will load a different image

    body { background: url(image1.jpg); }
    body { background: url(image2.jpg); }

    first load image1.jpg… then after 10 seconds load image2.jpg, simple

    anyone can direct me ?

    # April 6, 2013 at 5:58 am

    There are also a number of Jquery plugins such as [This](http://buildinternet.com/project/supersized/ “”) which you can use, from here you can control the duration an image takes to carousel (10 seconds..)

    This what you were after?

    # April 6, 2013 at 6:03 am

    $(function() {
    var body = $(‘body’);
    var backgrounds = new Array(
    ‘url(image1.jpg)’,
    ‘url(image2.jpg)’
    );
    var current = 0;

    function nextBackground() {
    body.css(
    ‘background’,
    backgrounds[current = ++current % backgrounds.length]
    );

    setTimeout(nextBackground, 10000);
    }
    setTimeout(nextBackground, 10000);
    body.css(‘background’, backgrounds[0]);
    });

    You don’t need to set the initial background in css, that’s what the last line is there for. That way you can keep all the backgrounds together, easier to maintain. :) You are not limited to background images, you can add colors and gradients to the array too.

    # April 6, 2013 at 6:23 am

    Change body’s ID/Class every 10 seconds. Each class/ID maps a specific background.

    I guess JS will be lighter than if you try to change the background dynamically.

    Quick example: http://jsfiddle.net/xdUBZ/1/

    # April 6, 2013 at 10:57 am

    @AdamHodgson – I’m using already ‘supersized’ but it doesn’t support all the monitors, if you having a widescreen probably you’ll see it good in all browsers, but old monitors it doesn’t do the stretch, but it’s not the issue , this plugin is too heavy for what i’m asking for.

    @CrocoDillon – Your code looks like something that i really need, but can you help me a little? i’ve tried to do that and i see nothing,
    i put the images in the same folder , how do the markup should look like?

    # April 6, 2013 at 6:06 pm

    Did you include jQuery? No special markup or css needed with that script.

    # April 7, 2013 at 2:56 am

    it has error on the second line that you wrote,
    can you check it please?

    # April 7, 2013 at 4:06 am

    Sorry, it’s working.. thanks!

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".