Image background with 50% opacity overlay

Question

I'm trying to create a new section on my website, something I haven't done before. I want to create a section with a full width background image. But the right side of the image need a 50% opacity color overlay. I found a example image showing exactly what I want to create:

https://i.stack.imgur.com/ssvI7.jpg

I have tried searching on Google for any tutorials, but the only things I find are full width images with full width opacity color overlay.

Answer 1

I would suggest giving the overlay an absolute value (position: absolute) and then starting it halfway across the page by giving it a left value of (left: 50%)

You can then give the overlay a whatever colour/opacity you like

Answer 2

try this one

.parent {
  position: relative;
}

#opacity_div {
  background: #fff;
  height: 500px;
  width: 70%;
  position: absolute;
  top: 0px;
  left: 30%;
  opacity: 0.5/* manipulate to desired opacity */
}

img.half_fade {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1000;
}

<div class="parent">
  <div id="opacity_div"></div>
  <img class="half_fade" src="https://hindi.oneindia.com/img/2017/10/68-28-1477651101-02-1506944733.jpg" width="70%">
</div>

Answer 3

Please check if this is helpful to you. here you can use before and after psuedo elements.

div {
background:url('https://dummyimage.com/600x400/000/fff') no-repeat top center;
height: 500px;
width: 100%;
background-size: cover;
position: relative;
}

div:before, div:after {
content:'';
width: 50%;
position: absolute;
top:0;
bottom:0;
display:block;
z-index:1;
}

div:before{left:0; background: rgba(255,255,255,.8);}

div:after{right:0; background: rgba(255,255,255,.5);}

<div></div>

Answer 4

You could just edit the background image to have the overlay already on it if you are not able to code it up yourself. However, this approach won't really work if your website is responsive.