CODEWITHSUNDEEP
htmlcssgradient
Captain Stack
Captain Stack

Reputation: 3824

How to put gradient on top of background image but below text

I have some <div>s with background-images and white text. I want to put a dark gradient on top of the image so that the white text will be readable. I must do this in CSS. How can I accomplish this?

<div><p>Here is some text</p><div>

div p {
    color: white;
}
div {
     background-image: url("images.png")
}

Upvotes: 0

Views: 165

Answers (2)

Eeji
Eeji

Reputation: 1648

change this....

div {
     background-image: url("images.png")
}

to this...

div {
     background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.2)), url("images.png")
}

have a look on google for examples because quite a few browsers still need specific prefixes for linear-gradient because of varying browser specifications and implications.

Upvotes: 1

Cedric Ipkiss
Cedric Ipkiss

Reputation: 6337

You can put the gradient as the background of the p element:

div p {

color:white;

background:linear-gradient(to bottom, rgba(252,255,244,.5) 0%,rgba(179,190,173,.5) 100%);

}

Upvotes: 0

Related Questions