Background image overlay up to some width and responsive?

1

is there any way to apply a background-image overlay or linear-gradient property to achieve like as shown in the figure ?

home_03.png456×552 327 KB

2

You can achieve this in a tricky way (1st thought):

  • Add the image as a background for the container.
  • Then add a div tag within it which will be as big as you want that overlay, like height 100% and width 50% and add to it a background color of rgba(0, 0, 0, 0.6). Black with 0.6 opacity.
3

And now for something completely different.

<div style="background-image: src="someimage.jpg"; width:100%; height: auto;">
<div style="background-color: rgba(0,0,0,.6); width: 20%; width: 100%; height:100%;">
Some text
Maybe <ul>
</div>
</div>

Should work and be responsive up till the image is bad looking.

4

Finally i done it :smile: http://codepen.io/nikhilrajnair/pen/yVEmoq