CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Gavin Sellers
Gavin Sellers

Reputation: 664

How can you fade to a new background without the content fading in as well?

I'm trying to change my page's background when it goes to a new page by fading the new image in slowly behind the content of the page. However, when I try to fade in the new image, literally the whole page fades in because the div containing the background also contains the content. The div that contains the background image change is "nextImage".

<body>
<div id="nextImage">
     Bunch of Content
</div>
</div>
</body>

Here is the javascript I'm trying to get working which is on a new page:

<script type="text/javascript">
    $('#nextImage').css('background-image', 'url(Tranquil.jpg)').hide();
    $('#nextImage').fadeIn(5000);
</script>

Here's the CSS:

body 
{
    background-image:url("abstract1.jpg");
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
}
#nextImage
{
    background-image="";
    background-repeat: no-repeat;
    background-size:100%;
    background-attachment:fixed;
    font-family:font-family: Helvetica,Arial, sans-serif;
    text-align:center;
    width: 100%;
    height: 100%;
    z-index:1;
}

Thanks for your help ahead of time :D

Upvotes: 2

Views: 1059

Answers (2)

Joao Almeida
Joao Almeida

Reputation: 982

You can use two overlayed divs (http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) and the fade the one with the background.

Upvotes: 0

Henesnarfel
Henesnarfel

Reputation: 2139

Well you've basically answered your own question by saying the div containing the background also contains the content

Separate the background div and content div so that you can fade the background as needed without affecting the content

<body>
   <div id="nextImage">
   </div>
   <div id="content">
       Bunch of Content
   </div>
</body>

check out my example here http://jsfiddle.net/Hn9w4/

Upvotes: 1

Related Questions