CODEWITHSUNDEEP
htmlcss
Fins Up
Fins Up

Reputation: 39

How to tint background image in the css

I'm not quite sure how to do this. I have seen people say use linear gradient in the css under the background image url and add the rgba values but for some reason when I put linear-gradient in the css it doesn't work. When I type the code into my cms, it is white, while all the other working properties turn grey. (just to explain that it doesn't work) Here is my code. Hope this makes sense. 

.topInfo {
    background-image: url('/CMS_Static/Uploads/313864614C6F6F/miami beach-1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 684px;
    linear-gradient: linear-gradient(rgba(#F9774C, .75), rgba(#802A0C, .85)),
}

Upvotes: 2

Views: 9294

Answers (3)

kamyl
kamyl

Reputation: 6386

You can do it by setting 2 backgrounds on the same element. First background needs to be a little transparent, so that you can see the other one below the first one. Linear background can also be a background, just like regular image. You can set multiple backgrounds with ,.

Example:

body {
  background-image:
    linear-gradient(0deg, rgba(0,255,0,0.4), rgba(255,0,0,0.2)),
    url(https://upload.wikimedia.org/wikipedia/commons/4/41/Sol454_Marte_spirit.jpg);
}

You can see full example in action here.

You can read and learn about background-image here.

You can read and learn about linear-gradient here.

Upvotes: 1

Misacorp
Misacorp

Reputation: 71

This is definitely possible, though not exactly the way you are trying to approach it. Check out this answer for applying multiple backgrounds to an element. Note that the order in which these backgrounds are applied has an effect.

Pay attention to your color definitions. rgba accepts colors defined in RGB, not HEX values like you use. I converted your colors to RGB values:

#F9774C = rgb(249,119,76)
#802A0C = rgb(128,42,12)

Adding your desired alpha values to these and changing the format from rgb to rgba, your linear gradient is:

linear-gradient(rgba(249,119,76,.75), rgba(128,42,12,.85))

Check it out here, but please give the answer linked above a read. It has useful information on browser compatibility and fallbacks.

Upvotes: 0

Noushad Ali
Noushad Ali

Reputation: 187

linear-gradient is the property of background it should be something like

background: linear-gradient(rgba(249, 119, 76,.75), rgba(128, 42, 12,.85));

Refer more at https://www.w3schools.com/css/css3_gradients.asp

Upvotes: 0

Related Questions