How to position a div with width, height on top of a contain background?

Question

I have a background image (a car) and I want to make it responsive so the background is going to big the biggest size possible in all resolutions. I managed to do that by setting background-size to contain .

But I also need to place a div on top of a specific area in this image, I want a div to cover the car windshield.

The issue is that I don't know how to calculate where the windshield is going to be due to contain .

Is there a way to predict where the background is going to be? How can I cover the windshield with a div?

If that's not possible, would there be some alternative to contain that would keep the image as big as possible just like the way contain handles it?

Here's a CodePen I made to simulate my scenario: https://codepen.io/brunolm/pen/bKdrGz

Answer 1

The challenge about the contain value is that it handles 2 different scenarios. If the aspect ratio of the image is wider than the container, the image will have a height of 100%, and a difficult to calculate width. In the opposite case, the width will be 100%.

So we need to handle the 2 different posibilities in a different way.

Luckily, you are using 100% of the browser, so that we can use a media query on the aspect ratio of the browser window.

Then, calculate the position of the rectangle using the relevant viewport units.

To make the media query change visiblem, I have also modified the color of the div

 html, body, .bg { width: 100%; height: 100%; margin: 0; } .bg { background: url('https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg') no-repeat; background-position: center; background-size: contain; } .area { background: rgba(200, 200, 200, .5); position: absolute; position: absolute; top: calc(50% - 43vh); height: 26vh; left: calc(50% - 54vh); width: 110vh; } /* portrait mode */ @media screen and (max-aspect-ratio: 8/5) { .area { background-color: rgba(200,0,0,0.5); top: calc(50% - 28vw); height: 17vw; left: 14vw; width: 71vw; } } 

 <div>current screen size: <span id="w"></span></div> <div class="bg"> <div class="area"><!-- should cover windshield at all times --></div> </div> 

Answer 2

You need to add the img and the area div to the same container. Then, use percentages to position them correctly inside the container. By using percentages in the container, when the container is resized, the position of the elements should stay in the same place since they will be responsive in relation to the container and not the page:

 html, body { width: 100%; height: 100%; } .car { width: 50%; display: block; margin: 0 auto; position: relative; } .car img { width: 100%; } .area { width: 70%; height: 30%; background: rgba(200, 200, 200, .5); position: absolute; bottom: 0; right: 0; top: 5%; left: 50%; margin-left: -35%; } 

 <div class="car"> <img src="https://thumbs.dreamstime.com/b/black-white-d-car-nissan-skyline-46715732.jpg" /> <div class="area"><!-- should cover windshield at all times --></div> </div> 

I'm using a trick here to center the area div in the container. You give the div a left: 50% and then set a negative left margin that is equal to half the width. So since the width of the area div is 70%, we can use left: 50%; margin-left: -35%; left: 50%; margin-left: -35%; to center it.