background image with cover overlay. - html

Question

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;
}

Answer 1

if you want the buttons to be over the overlay red tint. then move the buttons above the plane of the red tint.
to achieve that you need to give a z-index to the button ( imagine z axis in graph) positive value brings it above and negative values push it down. But to give a relative positioning of z axis you also have to specify the css position to relative
add this css to the bottom of your code...
button{
position:relative;
z-index:10;
}
now this will target all buttons in the page. If you want to target only specific buttons, give the buttons an id or class.
Also there is a unclosed paragraph tag in your code < / p >. Not sure if you had a copy paste error or not

Answer 2

Try this onces..i had brought some changes which does what you want.
<div id="cover-wrap">
<div class="black-cover"></div>
<div id="background-cover" class="center">
<div id='box'>
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class='username'>Cloud #3</p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
</div>
</div>
<!-- html ends here -->
<!-- css looks like this -->
#cover-wrap
{
position: absolute;
width: 1350px;
}
.black-cover
{
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
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;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/0/05/20100726_Kalamitsi_Beach_Ionian_Sea_Lefkada_island_Greece.jpg');
display: inline-block;
height: 100%;
width:92.6%;
}
#box
{
position: relative;
}
#backgrond-cover .username
{
font-weight: bold;
margin-top: 20px;
}
#backgrond-cover .location
{
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}
/*css ends here */

Answer 3

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')">
<div class="content-wrapper">
<img src="img/people/heyfitty-girl-9.png" class="main-profile-pic img-circle"/>
<p class="username">Cloud #3<p>
<p class="location">Birmingham</p>
<p class="summary">Hi, im Paul, Designer / Developer rocking out in Bham</p>
<button class="cheeky-kiss-btn">Cheeky Kiss</button><span class="or">or</span>
<button class="hangout-btn">Hang out</button>
</div>
<div class="black-cover"></div>
CSS
/*Cover Info*/
#cover-wrap {
position: relative;
}
div.black-cover {
background-color: rgba(255, 0, 0, 0.5);
position: relative;
top: 0px;
z-index: 10;
width: 100%;
height: 100%;
}
.content-wrapper {
position: absolute;
z-index: 50;
width: 100%;
height: 100%;
left: 20%;
top: 20%;
display: inline-block;
}
#backgrond-cover {
background-color: #37383a;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #fff;
position: absolute;
display: inline-block;
z-index: -1;
width: 100%;
height: 300px;
}
#backgrond-cover .username {
font-weight: bold;
margin-top: 10px;
}
#backgrond-cover .location {
font-size: 14px;
}
#backgrond-cover .summary {
font-size: 14px;
margin-bottom: 20px;
}

Answer 4

If you want to create overlay by making it absolute but it cover the content, you can play with z-index then. First set z-index of the container to 1, then add z-index -1 to the overlay. This should make overlay placed under the content.
.item{
background: url(https://d13yacurqjgara.cloudfront.net/users/13307/screenshots/1824627/logotypes_1x.jpg);
background-size: cover;
width: 300px;
height: 300px;
position: relative;
z-index:1;
}
h1{color: white}
.item:after{
content:"";
background: rgba(255,0,0,.5);
position: absolute;
top: 0;
bottom:0;
left:0;
right: 0;
z-index:-1;
}
<div class="item">
<h1> content here</h1>
</div>
The snippet above is make use of after pseudo element to make the overlay rather dan using another HTML tag.
i have restructured your code, deleting unnesessary tag, you can check it out here http://jsfiddle.net/rzp318kb/6/

Answer 5

just add this
#backgrond-cover p, #backgrond-cover span, #backgrond-cover button, #backgrond-cover img {
position: relative;
z-index: 20;
}
and add z-index: 10; to #cover-wrap .black-cover. Should do the trick.