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.

[![car](https://i.stack.imgur.com/zw4LO.png)](https://i.stack.imgur.com/zw4LO.png)

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

[![wrong placement](https://i.stack.imgur.com/Ok8T1.png)](https://i.stack.imgur.com/Ok8T1.png)

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>