Make div cover whole image

Question

I'm trying to create an opaque div with a slight colour over an image. I can't seem to get it to fit exactly over the whole image. I've tried so many different variations and the following is the best I can come up with. I know it's probably something simple but I think I need some help lol.

.old{
    position: relative;
}

.cover{
 background-color: blue;   
 width: 100%;
 height: 200vh;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0.5;
}

<div class ="cover">
    
</div>

<img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">

Have you tried using the image as a background? – koralarts Mar 19 '20 at 14:29 — koralarts, Mar 19 '20 at 14:29

Dusan Radovanovic · Answer 1 · 2020-03-19T14:59:11.793

You should wrap cover div and image with another div and set its position to be relative. Then you should set the height and the width of the image to 100% to fulfill the wrapper div and also you should set the cover div position to be absolute and expand it all over the wrapper div.

If you want to set custom height and width to the image, you should set those properties to wrapper div.

 .old{
        height: 100%;
        width: 100%;
    }
    
    .cover{
     background-color: blue;   
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 1;
     opacity: 0.5;
    }
    
    .wrapper {
      position: relative;
    }

 <div class='wrapper'>
        <div class ="cover">

        </div>
        <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg">
    </div>

OMG! just saw your solution its same as mine :P +1 – ROOT Mar 19 '20 at 14:51 — ROOT, Mar 19 '20 at 14:51

score 1 · Answer 2 · answered Mar 19 '20 at 14:50

You don't need to use img use just background color .

https://jsfiddle.net/hu3wfc76/

<div class ="cover">
  <div >
  </div>   
</div>


.cover{
 background-color: blue;   
 background:url(https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg) no-repeat;
 background-size:cover;
 width: 100%;
 height: 200vh;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 opacity: 0.5;
 --filter:blur(10px);
}
.cover div{
  background:blue;
  width:100%;
  opacity:0.5;
  height:100%;
}

ROOT · Accepted Answer · 2020-03-19T15:45:11.147

I think this is what you want, basically I added a container for both the image and the div and forced the div position to be relative to container <div>

body {
  margin: 0;
}
.container {
 position: relative;
}

.cover {
 background-color: blue;   
 width: 100%;
 height: 99%;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0.5;
}

<div class="container">
  <div class ="cover">

  </div>

  <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

score 0 · Answer 4 · answered Mar 19 '20 at 14:52

You can use pseudo elements with a background as an alternative to another element if you don't need an alt text on that image.

<div class="cover"></div>

.cover {
  background-color: rgba(0, 0, 255, 0.5);   
  width: 100%;
  height: 200vh;
  position: relative;
}

.cover::after {
  content: ' ';
  background-image: url('https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg');
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

https://codepen.io/koralarts/pen/RwPBWVd

score 0 · Answer 5 · answered Mar 19 '20 at 15:10

Just a simple way to give overlay a whole image. wrap the image within a div and do with CSS pseudo selector. just like below

.cover{
 position:relative;
 width: 100%;
 height: 100%;
}


.cover::before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background: rgba(0,0,255,0.5);
  content:'';
  z-index:2
}

  <div class ="cover">
      <img class="old" src="https://www.technogies.com/wp-content/uploads/2018/10/Elderly-At-Using-Technology.jpg" style="width:100%">
</div>

Make div cover whole image

5 Answers5