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
– michaellindahl, Commented Jul 21, 2012 at 17:56
I mean, when do you want to trigger the fade? When does the image need to fadeOut? — Bram Vanroy
– Bram Vanroy, Commented Jul 21, 2012 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
– michaellindahl, Commented Jul 21, 2012 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
– Bram Vanroy, Commented Jul 22, 2012 at 7:34

user492536 · Accepted Answer · 2012-07-21 18:40:35Z

6

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/

answered Jul 21, 2012 at 18:40

user492536

9171 gold badge9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

michaellindahl Over a year ago

This is what I want: jsfiddle.net/FVNY7/2 But without the repetitive divs.

Ana Over a year ago

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 Over a year ago

@michaellindahl So you want the text to fade into the image as you scroll up?

michaellindahl Over a year ago

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.

ScottS Over a year ago

@Ana--if IE8 is to be supported, a pseudo-element would not work.

michaellindahl · Accepted Answer · 2012-07-26 22:11:37Z

1

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%);

answered Jul 26, 2012 at 22:11

michaellindahl

2,0525 gold badges38 silver badges64 bronze badges

Comments

michaellindahl · Accepted Answer · 2012-07-22 06:56:18Z

0

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>\";
        ";
    }   
?>

answered Jul 22, 2012 at 6:56

michaellindahl

2,0525 gold badges38 silver badges64 bronze badges

1 Comment

michaellindahl Over a year ago

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.

Collectives™ on Stack Overflow

CSS - Transparency Gradient on an Image

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related