background image with cover overlay.

1.3k views Asked by At

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

There are 5 answers

2
Nolan On

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;
}
3
Sai On

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

0
Luciano On

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.

0
Ariona Rian On

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/

2
SOuřaan Gřg On

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 */