CODEWITHSUNDEEP
htmlcss
marcel
marcel

Reputation: 3272

CSS image as background with overlaying gradient color

I have a picture as background of a list-element.

JSFiddle

I'd like to have a gradient overlaying the background-image of the list-item which should be transparent.

css foreground, overlaying the image should be like this:

.listItem{
    background: linear-gradient(white, black);
    opacity: 0.2;
}

I can't wrap a div around the list-element, because the framework doesn't accept it.

Upvotes: 0

Views: 172

Answers (2)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

Demo .. Try this in your CSS

.listItem{
    background: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.5)), url('http://t0.gstatic.com/images?q=tbn:ANd9GcSEtKrXuUIiURHP7PFGY_cdYDXyuWhilTgWHkJxZRWAt3-tlSy6epfAAFQQ') no-repeat;
    background-size: cover;
}

you can use RGBA colors which are much better than using normal colors with opacity property

Hope this will help you

Upvotes: 2

Earth
Earth

Reputation: 3571

You can add the image url at the last

.listItem{
    background: linear-gradient(white, black), url('/img/sampleImage.jpg') no-repeat;
}

Upvotes: 1

Related Questions