CODEWITHSUNDEEP
htmlcss
user6038967
user6038967

Reputation:

Add overlay over image

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.

Upvotes: 1

Views: 366

Answers (4)

Felix A J
Felix A J

Reputation: 6470

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/

Upvotes: 1

Gibbs
Gibbs

Reputation: 22956

.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

Upvotes: 0

LoopCoder
LoopCoder

Reputation: 182

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

Upvotes: 0

Steve K
Steve K

Reputation: 9055

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

Upvotes: 0

Related Questions