scale div to background image size

Question

I have an image that I need to put divs on top of for links. I did this fine when I initially created the website, but now I am tasked with making it responsive, so I can no longer use -top and left values to position the overlay divs because they don't move with the image.

Trying to put the image as a background image so that the position of the overlays can be set and contained within the parent container.

I have tried using the background size property (cover, contain, 100%), but they will not make the div show all 400px of its height.

setting a max height, using auto, or 100% do not work either.

I would use min-height, but then the div would not scale down on mobile devices.

Does anyone know how I can get my parent div to be the full size of the background image?

Answer 1

One recommendation is to position the links using top and left percentages, ie:

#link1 {
     position: relative;
     top:2%;
     left:2%;
}