Yet another background image with gradient transparency

Question

I checked many sites regarding this topic and found random stuff nothing solid. I have checked a question already been answered in stackoverflow but it is not the thing I am looking for. I have altered the code of the JSfilled mentioned and tried adding a background color to a image that suppose to be transparent http://jsfiddle.net/FVNY7/518/ but sadly, it wasn't the thing I want to seek

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


.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; background-color:red;}

.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: -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);

}

I want a background image that blends with the background color (gradient starts from bottom to top of the image), in other words, if the background of my site changes color, the transparent gradient takes into consideration the background color of my site, I do not want manually defined colors where the gradient starts. Hope you understood what I mean. The example of jsfiddle I provided is the thing that I dont want to achieve. Let that picture blend with the background. I hope you understood my question.

You'd probably need JS to do that. CSS can't detect background colors of another element — Paulie_D, Jun 29 '15 at 15:47
You may wish to link to the question you have seen and which doesn't meet your needs, and say how the answers on that question fail to meet them. Because the title and content of this question does not appear to be different from [this question](http://stackoverflow.com/q/2504071/215552). — Heretic Monkey, Jun 29 '15 at 15:50

score 0 · Answer 1 · answered Jun 29 '15 at 15:51

0

Without JavaScript, I would recommend using a translucent PNG for the image. Then it will appear to blend with the background.

Alternatively, you could place the image at the bottom-level and use RGBa colors for the gradients applied on top of it.

answered Jun 29 '15 at 15:51

bboysupaman

1,274
1
13
20

Yet another background image with gradient transparency

1 Answers1