CSS - Transparency Gradient on an Image

Question

I would like my background image to go from 100% opacity to 0% opacity. I could choose to use another image asset where I use an image editor to make the image fade opacity, however I want to use as little assets as possible. Can this be done with CSS? I know I could make several divs in which I change the opacity on each one, however this would require a lot of divs to make it look good.

This is what my code currently looks like with the solution I don't want to use:

<div class="contentFadeAway" id="cfa1"></div>
<div class="contentFadeAway" id="cfa2"></div>
<div class="contentFadeAway" id="cfa3"></div>
<div class="contentFadeAway" id="cfa4"></div>
<div class="contentFadeAway" id="cfa5"></div>
<div class="contentFadeAway" id="cfa6"></div>
<div class="contentFadeAway" id="cfa7"></div>
<div class="contentFadeAway" id="cfa8"></div>
<div class="contentFadeAway" id="cfa9"></div>
<div class="contentFadeAway" id="cfa10"></div>

And the CSS:

.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 5px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}

#cfa1 { top: 160px; opacity: 1; }
#cfa2 { top: 165px; opacity: .9; }
#cfa3 { top: 170px; opacity: .8; }
#cfa4 { top: 175px; opacity: .7; }
#cfa5 { top: 180px; opacity: .6; }
#cfa6 { top: 185px; opacity: .5; }
#cfa7 { top: 190px; opacity: .4; }
#cfa8 { top: 195px; opacity: .3; }
#cfa9 { top: 200px; opacity: .2; }
#cfa10 { top: 205px; opacity: .1; }

For those that don't understand what that code is doing it is here: http://jsfiddle.net/FVNY7/2/ I have a background image, and I want the content to fade away when it scrolls up, so I would have the same image with an opacity from 1 to 0 to give that effect. If the background was a solid color I could just use a rgba gradient, but its an image.

At the top and the bottom of the div. I just added example code of what a terrible solution would be. — michaellindahl, Jul 21 '12 at 17:56
I mean, when do you want to trigger the fade? When does the image need to fadeOut? — Bram Vanroy, Jul 21 '12 at 18:08
I don't want it to fade out. I don't want it to be a CSS transition. I want it to be permanent. I could create a image that is 0% to 100% opacity from top to bottom, but I don't want to have another asset on the site. — michaellindahl, Jul 21 '12 at 18:30
i still don't understand what you want. When a page loads, the background is 100% visible, and then what? It immediately hides itself? It may just be me, because two people have already tried answering your question. — Bram Vanroy, Jul 22 '12 at 07:34
@BramVanroy I have answered my question with my attempt which kinda of works and also check out my jsfiddle. I have an image background, a transparent header bar, and a content area. I do not want the content to appear under the header bar, so I also have the image background above the content and only under the header bar. If the user scrolls the content immediately disappears (as it would if it was just going off the page) I want it to gradually disappear. If it was a black background I could just use a rgba gradient over the content with an opacity change, but it's not. — michaellindahl, Jul 23 '12 at 03:05

score 6 · Answer 1 · answered Jul 21 '12 at 18:40

For the most cross-browser support, set your background image in your div. Then overlay another div with a semi-transparent gradient background on top of it.

HTML:

<div class="content"></div>
<div class="FadeAway"></div>

CSS:

.content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; }

.FadeAway{
    position: absolute; top:0px; left:0px; width:100%; height:100%;
        background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}

Here's a fiddle of the above example: http://jsfiddle.net/FVNY7/

This is what I want: http://jsfiddle.net/FVNY7/2/ But without the repetitive divs. — michaellindahl, Jul 21 '12 at 19:20
**1)** `-ms-filter` line isn't needed - that makes the code 1 line shorter **2)** Standard syntax (no prefixes) goes last. Also, the `-ms-linear-gradient` line goes after the `filter`. **3)** A pseudo-element could be used instead of a second div. — Ana, Jul 21 '12 at 19:30
@michaellindahl So you want the text to fade into the image as you scroll up? — Ana, Jul 21 '12 at 19:40
Not entirely. The entire div, the div will have a background color, images, and what not. If I could just use opacity, but have it be a gradient that is what I am looking for. See the jsfiddle. But yeah, I want content to fade out as it scrolls off the page/viewable area. — michaellindahl, Jul 21 '12 at 20:16
@Ana--if IE8 is to be supported, [a pseudo-element would not work](http://stackoverflow.com/questions/10403916/why-does-a-filter-gradient-on-a-pseudo-element-not-work-in-ie8/10669986#10669986). — ScottS, Jul 21 '12 at 21:44

score 0 · Answer 2 · answered Jul 22 '12 at 06:56

Although it may not be the best implementation and there could be a better way the best way I have found is the down and dirty implementation that I mentioned in my question. Using PHP code it can be more refined and look good. Here is the code:

<style>
.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 1px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}
</style>


<?php 
    for ($int = "1"; $int <= "50"; $int++) {
        echo "<div class=\"contentFadeAway\" style=\"top: " . (160 + 1 * $int) . "px; opacity: " . (1 - .02 * $int) . ";\"></div>\";
        ";
    }   
?>

This solution does not work on an iPhone. The individual divs can are visible and appear separated, and also the background image is not fixed like the desktop. — michaellindahl, Jul 23 '12 at 02:55

score 0 · Accepted Answer · answered Jul 26 '12 at 22:11

My solution to my problem is to simply state that this is not possible with the current technology. An alternative option would be to use a simple transparency gradient. Until A better solution arrises this is what I will end up doing.

background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);

CSS - Transparency Gradient on an Image

3 Answers3