How can I fix a div in a specific place on the background in different page sizes?

 body { background: url(https://www.ytrecruit.com/images/bg1.jpg); background-size: cover; background-repeat: no-repeat; } div.block { position: fixed; left: 50px; top: 50px; } img.blockimg { width: 50px; } 
 <html> <head> </head> <body> <div class="block"> <img class="blockimg" src="https://upload.wikimedia.org/wikipedia/commons/7/71/MA_Route_1.svg"> </div> </body> </html>

    1 answer 1

    First you need to transfer the position: absolute; value to the style block .block position: absolute;

    Next you need to use js (in my case, I use the jQuery library), so that everything works as it should in any case.

    So, first we need to determine the size of the window when it is launched (to take into account the diagonal of any window). To do this, I will use this code:

     var sizeOfWidth = $(document).width(); var sizeOfHeight = $(document).height();

    These variables will store window size values. Now, knowing the size of the window, we can set the values ​​we need (even if the div is in the center) for our block (which is 50% in height and the width of the window size):

     $('.block').css('margin-left', sizeOfWidth/4); $('.block').css('margin-top', sizeOfHeight/4);

    That is, I passed in the style block .block margin-top: 25%; values margin-top: 25%; , margin-left: 25%; .