CODEWITHSUNDEEP
cssbackgroundgradient
ilyo
ilyo

Reputation: 36411

Trying to combine CSS gradient and background image

I want to have transparent gradient over an image, so I did the following but it shows only the image

background-image: url(../img/hex-pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2)));

Any ideas why?

Upvotes: 0

Views: 3406

Answers (2)

BoltClock
BoltClock

Reputation: 724342

When you specify your image first, that image gets drawn on top of the gradient, obscuring it completely. You need to switch them around so the gradient is layered on top (see the spec):

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(8%,rgba(255,255,255,0)), color-stop(92%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.2))), url(../img/hex-pattern.png);

Don't forget to include the rest of the gradient prefixes and the unprefixed one as well. Although when you do, this means duplicating the url() part of your background-image declaration as well.

Upvotes: 4

Andy Hill
Andy Hill

Reputation: 316

The order (think z-index) of the backgrounds is exactly backwards from what is logical. The first background you set is the one on top:

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

It's caused me similar frustrations. Just think of it vertically, like on the link:

body {
    background:
        background1, <-top
        background2,
        background3; <-bottom
}

Upvotes: 2

Related Questions