Fade in a div's background-image (not the body or fading out a background-color)

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!

Answers


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


Need Your Help

Full background/borders filled with parallax scrolling

javascript jquery html css

I am absolutely new to HTML and CSS so i was hoping someone could point me in the right direction. I am trying to understand this tutorial to make parallax scrolling websites:

XCode Error itms-90035 - Invalid signature?

ios xcode bower google-chrome-app

I've been building with Chrome-Mobile-Apps for the last few weeks in XCode with no problems until this morning, where I'm getting this Erorr itms-90035 when I try to submit my archive to the App St...