Position div on top of image

Question

Ok, so I want to position on top of another div which has a background image. The image-div has the following properties:

position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background-image: url('../img/1.jpg');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;

This looks like I want on all devices. But now I need to overlay the image-div with a clickable div that fits a certain part of the image. Getting the div to fit is easy, just set position to absolute and set top, left, width and height, but as soon as i display in another resolution/density the div is way off, no surprise there. So i tried with positioning by using % or vh and vw but nothing seems to work.

How would I go about positioning divs on top of the image regardless on what device, resolution and density I'm at?

Answer 1

It's a combination of background-position , background-size and an offset in percentages of the containing div.

Keep the background-position at a certain value so the spot on the image is always in screen.
Use background-size: cover; or background-size: contain; to keep the image (or it's container) responsive.
If you have two or more spots on the outer edges of the image I suggest using contain , but this will reduce the image size considerably on smaller screens while your inner div will stay reasonably large.
In other cases, use cover for resize purposes.

Here I created an example: (I used Jquery UI to make the image resizable)

 $( function() { $( "#resizable" ).resizable(); } ); 

 .container { background-image: url('https://images.unsplash.com/photo-1465218550585-6d069382d2a9?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop='); background-size: cover; background-position: 50% 50%; height: 500px; position: relative; width: 800px; } .hit-me-container { height: 16px; left: 52%; position: absolute; top: 45%; width: 16px; } .hit-me { animation: pulse 1s ease infinite; background-color: #fff; border: 3px solid #777; box-sizing: border-box; border-radius: 50%; cursor: pointer; height: 100%; width: 100%; } .hit-me-container:hover:after { background-color: #333; color: #fff; content: 'Buy these glasses'; display: block; font-family: sans-serif; font-size: 12px; left: 20px; padding: 5px; position: absolute; width: 100px; top: -4px; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } 

 <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="container" id="resizable"> <div class="hit-me-container"> <div class="hit-me"></div> </div> </div> 

Or check this fiddle

Answer 2

    <style type="text/css">
    #div_1
        {
            position:relative;
            top:0;
            left:0;
            width:100%;
            height:200px;
            background-image: url('../img/1.jpg');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
        }
    #div_2
        {
            position:absolute;
            width:50%;
            height:60%;
            margin:0px auto;
        }
    </style>
    <div id="div_1">
        <div id="div_2">
            testing...
        </div>
    </div>

Answer 3

You can use a div inside of the div with the background-image , but then position it within the div wherever you want using % s, not px or absolute values.

 #bg{ position: relative; width:100vw; height:100vh; background-image: url('/favicon.ico'); background-size: contain; background-repeat: no-repeat; background-position: center center; z-index: 5 } #overlay { position: absolute; height: 40%; width: 30%; z-index: 10; top: 13%; left: 34% } #overlay:hover { background-color: rgba(50,50,200,0.5); } 

 <div id="bg"> <div id="overlay"></div> </div>