Im working on a background image that is placed with inline styling, that has a red tint overlaying the image.
The problem occurs when the red tint is covering the content.
How would I make the red tint go under the buttons and text?
Please see JS Fiddle
Appreciate the help
#cover-wrap {
position: relative;
}
#cover-wrap .black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
top: 0px;
width: 100%;
height: 100%;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
padding: 50px;
color: #fff;
position: relative;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
Sorry did not read the question. I've updated with the it now working. You need to se the z-index on all elements you want above the red grad or like I did wrap all of them in a div and position that above the grad. Note, need position on all elements you want to use z-index on.
http://jsfiddle.net/MatrixMe/8pmdzms8/1/
HTML
http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg')">
CSS