Hello. Tell me, please, how to solve this problem:

1) There is an image.jpg with drawn buttons

2) It is necessary to make this image the background of an HTML document, and in place of each drawn button hang a DIV with a special positioning that will not get lost when the image is resized.

Those. How to make the image become rubber (adaptive) and the added DIV elements do not disperse when the image is resized?

enter image description here

    1 answer 1

    I suggest initially to calculate all the proportions of the image, that is, we calculate how much in percent the button is removed from below, to the right / left and its width / height. Now when you change the width of the picture will decrease, and with it the buttons

    .background { position:absolute; left:0; top:0; right:0; left:0; z-index: -1; } .background .image {display:inline-block;position:relative;width:100%;} .background .image img {display:inline-block;width:100%;pointer-events: none;} .background .image .button { position: absolute; background-color: transparent; bottom: 12%; width: 37.8%; height: 13.8%; border-radius: 10px; cursor: pointer; } .background .image .button.b0 {left: 6.9%;} .background .image .button.b1 {right: 7.9%;} 
     <div class="background"> <div class="image"> <img src="https://i.stack.imgur.com/z24fy.jpg"> <div class="button b0"></div> <div class="button b1"></div> </div> </div>

    • Yuri, thanks for the reply. How to make this background adaptive, i.e. changed when the browser was narrowed and the DIV elements did not move out? Is it possible to do this? - caboke
    • @caboke, that is, it completely changed or just narrowed, stretched, etc.? - Yuri
    • Yes, so that when entering from the phone, for example, this picture is adjusted to the permissions of the mobile device and the DIV elements do not disperse. Is it possible - caboke
    • @caboke, and the ratio in the picture should be maintained? Or it is possible, what the picture would stretch? - Yuri
    • The aspect ratio should be maintained. For example, if width becomes 200px, then height should become 200px. - caboke