Hello, I will try to explain briefly. For example, there is a div block called bg. It is stretched to the full length and width of the screen and filled with some kind of picture (for example, a room 1200x768). Suppose these styles:

html, body{ height:100%; } .bg{ background: url("bg.jpg"); background-size: cover; width:100%; }

There is a table on the background image. I create a div block that I want to place on the table of the background image. Is it possible to realize this? Those. Just putting it there is not a problem, but when the screen resolution changes, it flies (and indicating% as a unit of measurement does not help here, it still flies, because the picture decreases). I still do not understand which way to dig. As a result, I need to bind the div block to a specific part of the picture in any way.

    1 answer 1

    Like this? Hover on a pillow or on both chairs

     <!-- Image Map Generated by http://www.image-map.net/ --> <img src="http://www.interiordesignlovers.com/images/interior_designs/kidroom/05/4-dearkids_290410_04.jpg" usemap="#image-map"> <map name="image-map"> <area target="" alt="подушка" title="подушка" href="" coords="695,372,669,376,665,389,679,397,712,401,747,396,754,381,730,369,721,370,707,369" shape="poly"> <area target="" alt="стул" title="стул" href="" coords="731,497,689,503,677,508,689,557,702,577,691,604,678,633,704,651,736,652,769,648,747,582,765,557,771,529,773,512,762,507,752,504" shape="poly"> <area target="" alt="второй стул" title="второй стул" href="" coords="803,494,833,489,866,492,890,496,890,512,878,550,870,564,893,623,846,627,804,614,817,584,827,563,810,538,799,509" shape="poly"> </map>

    • Fine. Exactly what is needed. This is a discovery for me. It remains now to make it adaptive. Another disadvantage of this method is that it does not work with the background (only pictures). - zakiroof
    • I specifically put the link, for convenience - user33274