Use css gradient over background image

Question

I've been trying to use a linear gradient on top of my background image in order to get a fading effect on the bottom of my background from black to transparent but can't seem to be able to make it show.

I've read other cases here and examples but none of them are working for me. I can only see the gradient or the image but not both of them. Here's the link

Just click on the first logo, ignore that effect, what I'm trying is in the body in the whole site after that.

This is my css code:

body {
  background: url('http://www.skrenta.com/images/stackoverflow.jpg') no-repeat, -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1)));
}

That gradient is only Webkit - won't work on FF or IE. Additionally, I don't believe you can apply a BG image *and* gradient to the background. You'd need to apply the image to the bg, then have another layer (div for example) on top with the gradient — random_user_name, May 16 '13 at 14:03
possible duplicate of [Is it possible to combine a background image and CSS3 gradients?](http://stackoverflow.com/questions/2504071/is-it-possible-to-combine-a-background-image-and-css3-gradients) — Blazemonger, May 16 '13 at 14:04
possibly [**this**](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds) is what you might want to achieve — Anuj Kaithwas, May 16 '13 at 14:18

score 156 · Accepted Answer · edited Aug 19 '22 at 19:52

156

Ok, I solved it by adding the url for the background image at the end of the line.

Here's my working code:

.css {
  background: 
   linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%),
   url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;
  height: 200px;
}

<div class="css"></div>

edited Aug 19 '22 at 19:52

Temani Afif

245,468
26
309
415

answered May 16 '13 at 14:22

Pam

4,060
3
19
17

Been looking for this all day and this is the only solution that seemed to work as I needed it to. Thanks for posting. – GenXisT Aug 12 '13 at 17:36
2

For some reason i had to place my image first, then the gradient. thanks! – Valamas Aug 07 '14 at 06:28
Worked wonderfully for me! Only difference was that in my case the image was a pattern I wanted to repeat. – Herick Nov 17 '14 at 19:19
2

That puts the image behind the gradient. [This answer](http://stackoverflow.com/a/2547064/819417) puts it above. – Cees Timmerman Oct 13 '15 at 16:27
I am somehow getting either one of them, Gradient or Image. Please help. I am using inline style here and setting the need to set background-image attribute which is fetching the image from the server, and need a gradient over the same. – Pushkar Kathuria Jul 05 '17 at 09:38
1

Amazing. Beautiful. All other dudes explaining blah blah blah, when I just wanted it to work. – dawn Aug 15 '18 at 17:25

score 13 · Answer 2 · edited Mar 02 '17 at 14:25

13

body {
    margin: 0;
    padding: 0;
    background: url('img/background.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%);
}

PLEASE NOTE: This only using webkit so it will only work in webkit browsers.

try :

-moz-linear-gradient = (Firefox)
-ms-linear-gradient = (IE)
-o-linear-gradient = (Opera)
-webkit-linear-gradient = (Chrome & safari)

edited Mar 02 '17 at 14:25

Mikaël Mayer

10,425
6
64
101

answered May 16 '13 at 14:04

Ma9ic

1,107
4
16
30

It works on chrome if I put it like this: `background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 1))), url('/img/fondo-home.jpg') no-repeat;` – Pam May 16 '13 at 14:14
Its only using webkit so it will only work in webkit browsers. try : http://gradients.glrzad.com/ to get the full: -moz-linear-gradient = (Firefox) -ms-linear-gradient = (IE) -o-linear-gradient = (Opera) – Ma9ic May 16 '13 at 14:16
You may also want to note that some gradients don't work on older versions of IE, it might be worth having a look at http://css3pie.com/ to help. – Ma9ic May 16 '13 at 14:29
This is probably better if you need to dynamically set the background image (as in on a style element in the HTML). – harvzor Oct 17 '16 at 16:08

score 5 · Answer 3 · answered Jun 03 '15 at 17:59

#multiple-background{
 box-sizing: border-box;
 width: 123px;
 height: 30px;
 font-size: 12pt;
 border-radius: 7px;  
 background: url("https://cdn0.iconfinder.com/data/icons/woocons1/Checkbox%20Full.png"), linear-gradient(to bottom, #4ac425, #4ac425);
 background-repeat: no-repeat, repeat;
 background-position: 5px center, 0px 0px;
    background-size: 18px 18px, 100% 100%;
 color: white; 
 border: 1px solid #e4f6df;
 box-shadow: .25px .25px .5px .5px black;
 padding: 3px 10px 0px 5px;
 text-align: right;
 }

<div id="multiple-background"> Completed </div>

score 4 · Answer 4 · answered Feb 20 '15 at 19:59

The accepted answer works well. Just for completeness (and since I like it's shortness), I wanted to share how to to it with compass (SCSS/SASS):

body{
  $colorStart: rgba(0,0,0,0);
  $colorEnd: rgba(0,0,0,0.8);
  @include background-image(linear-gradient(to bottom, $colorStart, $colorEnd), url("bg.jpg"));
}

score 0 · Answer 5 · answered Jul 09 '23 at 10:43

If you cannot update the background property and you cannot consider an extra element or pseudo element, you can use border-image

Related: https://css-tip.com/gradient-overlay-border-image/

.css {
  height: 250px;
  background: url(https://picsum.photos/id/28/900/600) center/cover; 
}

.css {
  border-image:
    linear-gradient(#0003,#000) /* your gradient here */
    50%/50%; 
}

<div class="css"></div>

Use css gradient over background image

5 Answers5

Linked

Related