Add overlay over image

Question

I'm trying to put an overlay over an image. The image is a background image. The overlay works, but it covers more than only the image.

This is what my should webpage looks like:

1. Text & Navbar
2. Overlay
3. Image

But the page now looks like this:

1. Overlay
2. Text & Navbar
3. Image

HTML:

<div class="image-main">
    <?php include 'navbar.php'; ?>
    <div class="index-front">
         text
    </div>
    <div class="overlay"></div>
</div>

CSS:

 .image-main {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    transition: all 0.2s ease;
}

.index-front {
    margin-top: 50px;
    text-align: center;
    display: block;
    color: #CCCCCC;
    z-index: 4;
}

.overlay {
    background-color: #333;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.75;
    z-index: 2;
}

I've tried messing around with the z-index , but I couldn't get it to work.

Answer 1

Add position: relative; and overflow: hidden; .

.image-main {
  background-image: url('/img/background.jpg');
  background-size: cover;
  background-attachment: fixed;
  transition: all 0.2s ease;
     position: relative;
     overflow: hidden;
 }

 .index-front {
   margin-top: 50px;
   text-align: center;
   display: block;
   color: #CCCCCC;
   z-index: 4;
      position: relative;
  }

https://jsfiddle.net/afelixj/rxf3rnyy/

Answer 2

 .image-main { background-image: url('/img/background.jpg'); background-size: cover; background-attachment: fixed; transition: all 0.2s ease; } .overlay { background-color: #333; position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; opacity: 0.75; z-index: -1; } .index-front { margin-top: 50px; text-align: center; display: block; color: red; z-index: 2; }

 <div class="image-main"> <?php include 'navbar.php'; ?> <div class="index-front"> text </div> <div class="overlay"></div> </div>

Do you want something like this?

Change z-index values

Answer 3

First if you want your overlay to only cover the .image-main div then you will want to set this div to have a position of relative. Then to be safe give it a z-index of 1. Then set your .overlay div to have a z-index of -1 so it stacks behind everything in the div. Like so:

Note: I set the .image-main div to have a height so you can see it better.

here is a fiddle to show you Fiddle

 .image-main {
    background-image: url('/img/background.jpg');
    background-size: cover;
    background-attachment: fixed;
    transition: all 0.2s ease;
    position:relative;
    z-index: 1;
    height: 500px;
}

.overlay {
    background-color: #333;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    opacity: 0.75;
    z-index: -1;
}

Answer 4

Try this

in css -

.image-main {
background-image: url('/img/background.jpg');
background-size: cover;
background-attachment: fixed;
transition: all 0.2s ease;
position:relative;
}
.showPart{
  position:absolute;top:2px;z-index:3;
}
.overlay {
background-color: #333;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
opacity: 0.75;
z-index: 2;
}
#index-front {
margin-top: 50px;
text-align: center;
display: block;
color: #CCCCCC;
} 

in html

<div class="image-main">
  <div class="showPart">
    <?php include 'navbar.php'; ?>
    <div id="index-front">
         text
    </div>
  </div>
  <div class="overlay"></div>
</div>

Edit showPart class width and height as your needed