scale div to background image size

2019-06-03 22:16发布

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?

1条回答
Evening l夕情丶
2楼-- · 2019-06-03 22:31

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

#link1 {
     position: relative;
     top:2%;
     left:2%;
}
查看更多
登录 后发表回答