How to change the background of the html tag automatically?

Question

I use css code to add a background for the whole website like this:

html { 
      background: url('../include-uploads/backgrounds/ironman1.jpg') no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

and I want to change this automatically using jQuery code like this :

var old_url=$('html').css('background-image');
$('html').css('background-image',old_url).fadeOut(1000);
setTimeout(function(){
     $('html').css({"background":"url(include-uploads/backgrounds/ironman2.jpg) no-repeat"}).fadeIn(5000);
       $('html').css({"-webkit-background-size": "cover"});
       $('html').css({"-moz-background-size": "cover"});
      $('html').css({"-o-background-size": "cover"});
       $('html').css({"background-size": "cover"});
     }, 5000);

This code fading the whole website out (not just the background) and then fade the whole website in with the new background. Is there a way to fade out just the background not the whole website ?

You're fading the html element - you can't fade a background unless it's in an element of its own. You can make a div that sits behind the whole site and fade that instead. — Reinstate Monica Cellio, Sep 23 '14 at 13:27
Check [this](http://stackoverflow.com/questions/5533171/fade-background-image-in-and-out-with-jquery) which this question seems to be duplicate of. — artm, Sep 23 '14 at 13:29

score 0 · Answer 1 · answered Sep 23 '14 at 13:39

CSS solution:

$('html').addClass('light');
setTimeout( function() { $('html').removeClass('light'); }, 4000 );

* {
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: url(http://static.pexels.com/wp-content/uploads/2014/09/ocean-sea-sky-2808-527x350.jpg) center center no-repeat;
    background-size: cover;
    box-shadow: inset 0 0 0 10000px transparent;
    transition: 4s all;
}

.light {
    box-shadow: inset 0 0 0 10000px white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Lorem ipsum dolor sit amet enim. Etiam ullamcorper.

score -1 · Answer 2 · answered Sep 23 '14 at 13:27

-1

you need to have a background "div" element attached to your page, which should be spread 100% by 100% on that element you can apply the desired effect

answered Sep 23 '14 at 13:27

Tiberiu Petcu

822
7
10

How to change the background of the html tag automatically?

2 Answers2