Very simply, I'm trying to fade in the background-image of a div; I've seen this done with two divs and effectively revealing (i.e.: faux fading in) the background-image by fading out the background-color of a div covering the background-image. This will not solve my problem.

The above mentioned solution works if the "mask" is the same solid color as the body background-color. In my case, the body's background is a textured image, so this will not work. I could set the "mask" div to have the same background-image as the body, but having a z-indexed div seems like overkill.

tl;dr I have a div somewhere in the body--how do I fade in its background-image? Thanks!

Very simply, I'm trying to fade in the background-image of a div; I've seen this done with two divs and effectively revealing (i.e.: faux fading in) the background-image by fading out the background-color of a div covering the background-image. This will not solve my problem.

The above mentioned solution works if the "mask" is the same solid color as the body background-color. In my case, the body's background is a textured image, so this will not work. I could set the "mask" div to have the same background-image as the body, but having a z-indexed div seems like overkill.

tl;dr I have a div somewhere in the body--how do I fade in its background-image? Thanks!

• javascript
• jquery
• html
• css
• jquery-ui

• 1 possible duplicate? Fade In Background image – Andreas Commented Jun 13, 2012 at 22:39
• Nope, but that's closer than the effect mentioned above, but takes one background-image and replaces it with another. Saw that thread, though. Thanks! – Cesar Torres Commented Jun 13, 2012 at 22:42

3 Answers 3

You need two divs. The first one has no background color and the second one has a background image. Fade the second one (Asherlc proposed a way) and you're done.

.body {background-image:url(bg.png)}
.toFade {opacity=1 ... alternatives }
...

<div>
    <div class=toFade style="background-image:url(img.png)">
        <!-- possible content -->
    </div>
</div>

Not possible as far as I know. You will need 2 images / elements to do this. You could use jquery / jquery ui's toggleClass with a duration.

See examples here:

How to add a fadeIn effect while changing background image using .css in Jquery

jQuery li with image fade in background (fade in class)

Ok! It took me some time to solve this kind of "Challenge" and I think I came up with an idea close to your request! Despite the fact that you want to FadeIn only your background-image with only one div I made a jQuery script using clone() method.

The only thing that has a little work to do is if you want to fade In some text as well! Take a look of my script and let me know if it helped!

http://jsfiddle/7z8vB/