4

I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?

JS Fiddle: http://jsfiddle.net/6nJJD/

HTML

<div>hello</div>

CSS

div {
    background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
    color:#544a46;
    font:62.5%/1.6 Helvetica, Arial, Sans-serif;
    height:500px;
    width:500px
}
J82
  • 8,267
  • 23
  • 58
  • 87
  • Dublicate Question : http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients – Hardik Sondagar May 28 '13 at 12:11

3 Answers3

5

try to change your gradient colours using RGBA values

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

Example fiddle: http://jsfiddle.net/J7bUd/

Try also changing rgba(255,255,255, 0) with transparent: the result is slightly different but probably it's exactly what you're trying to achieve

Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
2

You can accomplish this using RGBA in the gradient.

http://jsfiddle.net/6nJJD/3/

CSS:

linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%)

You can modify the "0.65" value to attain the desired transparancy.

For Creating More Gradients as you like you can visit Ultimate Css Gradient Generator

Hope This HElps

Rohith
  • 769
  • 7
  • 15
0

like this?

http://jsfiddle.net/6nJJD/2/

 linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, #000000 100%)
Davor Mlinaric
  • 1,989
  • 1
  • 19
  • 26