29

I'm trying to put a css3 gradient over the top of a background image. Using the code below puts a background image on top of my gradient, but i'm trying to do it the other way around, so the gradient acts as a mask on top.

url(images/darkwood.png),
-webkit-gradient(linear, 0 0, 0 100%, from(#EEF), to(#000)) 300px 50px no-repeat,
-webkit-gradient(linear, 0 0, 0 100%, from(#EFE), to(#000)) 0 0 no-repeat;
background: 
url(images/darkwood.png),
-moz-linear-gradient(#EEF, rgba(0,0,0,1)) 300px 50px no-repeat, 
-moz-linear-gradient(#EFE, rgba(0,0,0,1)) 0 0 no-repeat;

Thanks for your help

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Pineapple Sunset
  • 317
  • 1
  • 4
  • 8
  • 2
    Can you make a [jsFiddle demo](http://jsfiddle.net/) of what you have so far? You can upload the image [here](http://imgur.com/). – thirtydot Nov 08 '11 at 10:57

3 Answers3

51

I have do this for one of my website, Hope it's work for you;

body {
 margin: 0;
 padding: 0;
 background: url('https://i.stack.imgur.com/MUsp6.jpg') repeat;
}

body:before {
 content: " ";
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: -1;
 top: 0;
 left: 0;
 background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%);
}
Flimm
  • 136,138
  • 45
  • 251
  • 267
Yoann
  • 4,937
  • 1
  • 29
  • 47
  • 1
    I have been looking for something that does this for a very long time. The only change I made was `position: fixed`. – seaneshbaugh Sep 14 '12 at 02:23
18

The example from this answer won't work with resizeable divs.

Your code would work fine. But as I understand it, CSS reads from the right to the left. So you would have to use the following:

div {
    background: -webkit-radial-gradient(top center, ellipse cover, rgba(255,255,255,0.2) 0%,rgba(0,0,0,0.5) 100%), url('http://www.google.co.uk/logos/classicplus.png') repeat;
}

Example: http://sapphion.com/2011/11/css3-background-gradient-on-top-of-an-image/

Flimm
  • 136,138
  • 45
  • 251
  • 267
Alan
  • 1,977
  • 1
  • 15
  • 12
0

It may be help you:

yourselector {
    background: linear-gradient(rgba(0,130,170,0),rgba(0,130,170,1)), url('/path/image.jpg');
}

For more gradient style visit: https://www.colorzilla.com/gradient-editor/

Al-Amin Sarker
  • 508
  • 3
  • 16
Hedayati
  • 1
  • 1