TransWikia.com

How can i add a black layer over top of image with opacity?

Stack Overflow Asked by user13851719 on December 23, 2021

<html>
<head>
<style>

#contain_main {background-color:black;
               width:100%;
               height:auto;}

#main {width:100%;
       height:700px;
       background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
       background-repeat:no-repeat;
       background-position:center center;
       background-color:#dbdbdb;}



</style>
</head>
<body>

<div id="contain_main">
    <div id="main">
    </div>  
</div>

</body>
</html>

how can i make the black #contain_main box is place over the #main div box?
i used z-index, position and display, but not work..how can i fix this?
any help will so appreciated! 🙂

csshtml

3 Answers

A simple way to go about adding overlays is to use multiple backgrounds with one of them being a gradient (the overlay color with an alpha value) and the other one being the background-image:


#main {
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206);
}

Answered by stringMan on December 23, 2021

You can stack child within by using z-index:-1;.

fiddle to playaround.

  1. Use relative to parent.
  2. Use absolute and z-index:-1; to child.

For demo purpose I have just used a padding:10px; to show that there is indeed child div is under parent, so you can take that out.

#contain_main {
  background-color: black;
  width: 50%;
  height: 700px;
  position: relative;
  padding: 10px;
}

#main {
  width: 100%;
  height: 700px;
  background-image: url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
  background-repeat: no-repeat;
  background-position: center center;
  background-color: gray;
  position: absolute;
  z-index: -1;
}
<html>

<head>
</head>

<body>
  <div id="contain_main">
    <div id="main">
    </div>
  </div>
</body>

</html>

Answered by Manjuboyz on December 23, 2021

One method is to make a sibling div to the image which is just the black background with lowered opacity (div#overlay). Add position relative to the parent. That way, you can add position absolute to the children, make them top and left 0 aligned to the parent, and give the black background a higher z-index than the image so that it overlays on top.

<html>
<head>
<style>

#contain_main {width:100%;
               height:700px;
               position: relative;}
#overlay {position: absolute;
          top: 0;
          left: 0;
          background-color: #000;
          opacity: 0.5;
          width: 100%;
          height: 100%;
          z-index: 1;}
#image {position: absolute;
       top: 0;
       left: 0;
       width:100%;
       height:100%;
       background-image:url("https://www.sappun.co.kr/shopimages/sappun/0090040002602.jpg?1581389206");
       background-repeat:no-repeat;
       background-position:center center;
}



</style>
</head>
<body>

<div id="contain_main">
    <div id="overlay"></div>
    <div id="image"></div>  
</div>

</body>
</html>

Answered by Xenvi on December 23, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP