4

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!

Cesar Torres
  • 41
  • 3
  • 1
    possible duplicate? [Fade In Background image](http://stackoverflow.com/questions/977090/jquery-fade-in-background-image) – Andreas Jun 13 '12 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 Jun 13 '12 at 22:42

3 Answers3

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>
2

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)

Community
  • 1
  • 1
Moin Zaman
  • 25,281
  • 6
  • 70
  • 74
1

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.net/7z8vB/

Manolisl Makris
  • 66
  • 3