Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Use css gradient over background image

Tags:

html

css

gradient

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)));  }
like image 936
Pam Avatar asked May 16 '13 14:05

Pam


People also ask

How do you put a gradient on an image in CSS?

To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

How do I combine a background image and CSS3 gradient on the same element?

You can combine a background-image and CSS3 gradient on the same element by using several backgrounds. In our example below, we set the height and width of our <div> and add a background. Then, we set the background image fallback using the “url” value of the background-image property.

Is it possible to combine a background image and CSS3 gradients?

CSS gradients allow us to display smooth transitions between two or more colours. They can be added on top of the background image by simply combining the background-image URL and gradient properties.


1 Answers

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: -moz-linear-gradient(top, 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;    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a') no-repeat;    background: -webkit-linear-gradient(top, 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;    background: -o-linear-gradient(top, 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;    background: -ms-linear-gradient(top, 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;    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>
like image 86
Pam Avatar answered Nov 03 '22 01:11

Pam