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?
One recommendation is to position the links using top and left percentages, ie: