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

Question

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

Henesnarfel · Accepted Answer · 2012-02-29T23:49:55.523

1

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/

edited Feb 29 '12 at 23:49

answered Feb 29 '12 at 23:44

Henesnarfel

2,129
1
16
18

That doesn't work because the background appears on top of the page. Not to mention you have to use javscript to adjust the height of nextImage to the height of body. – Gavin Sellers Feb 29 '12 at 23:46
all you need to do is put `position:absolute;` on your background div – Henesnarfel Feb 29 '12 at 23:48
well.. that kept it in one place but now it just fades in and covers up the content. – Gavin Sellers Feb 29 '12 at 23:52
@GavinSellers check out my example i've added on jsfiddle – Henesnarfel Feb 29 '12 at 23:52

score 0 · Answer 2 · answered Mar 01 '12 at 00:03

0

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.

answered Mar 01 '12 at 00:03

Joao Almeida

972
2
6
19

You can use two overlayed divs (http://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) and fade the one with the background. – Joao Almeida Mar 01 '12 at 00:04

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

2 Answers2