CODEWITHSUNDEEP
javascripthtmlcsscss-position
user326964
user326964

Reputation: 464

Prevent image moving on background when resizing window

I have a background image (picnic scene), and I copied out one of the donuts on it to place it over the original donut, and make only that area clickable. It has to stay in place, so that any user regardless of monitor size or window resizing will see the donut in that place and not in different places for different resolutions.

I used percentages for the donut to try to make it responsive and move and resize together with the background. When you resize the window, the picnic and donut resize fine, but the donut also moves around, it won't stay in place.

I want only the separate donut to be clickable, not the original one behind it, so that the user will understand that they have to click specific things.

I thought of maybe using some kind of overlay solution, but there's no way to make a "hole in the image", only to make a transparent area.
I have a few other scenes which have the exact same problem, but the backgrounds are a gif in one and a video in the other, so even if the overlay could solve it, I would have to do a lot of editing frame for frame in the gif and then get video editing software for the video.

Here's the minimal example and recreation of the problem:

body{   
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg"); 
}
#donut {
width:10%;
margin-left:50%;
margin-top:40.5%;
    color:#fff;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

#donut:hover {
    width:30%;
}
<!doctype html>
<html>
<head>
<link href="css/styles.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="movie">
    <div class="scene" id="picnic">
        <img class="clickable" id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
    </div>
</div>
</body>
</html>
I saw this suggestion but I don't understand how it fits into my situation or how/where the solution is to be added in my case: How to prevent image moving when resizing window

I should also add that another reason why I copied out the donut to put it back in is because I want to animate it on hover (as you can see when you test it), so the user sees it's interactable.

Upvotes: 0

Views: 82

Answers (2)

user326964
user326964

Reputation: 464

Seems that I managed to fix it. It started behaving when I changed background-size: cover; to background-size: 100% 100%;.

    body{
        margin: 0;
    }
    
    #picnic{   
        width: 100%;
        height: 100%;
        position: absolute;
        overflow:hidden;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-size: 100% 100%;
        background-image: url("https://www.bettycrocker.com/-/media/GMI/Core-Sites/BC/Images/BC/content/menus-holidays-parties/parties-and-get-togethers/modern-picnic-ideas/Modern-Picnics.jpg");
    }


    #donut{
        width:9.3%;
        height: 8.2%;
        left:50.5%;
        top:72.2%;
        position:absolute;
    }
    #donut:hover{
        width:21.3%;
        height: 16.8%;
        top:65.2%;
        left:42.5%;
    }
<!doctype html>
<html>
<head>
</head>
<body>
    <div id="picnic">
        <img id="donut" src="https://i.postimg.cc/7h3kFgX8/donut.png"/>
    </div>
</body>
</html>

Now I can resize the window, and the donut will stay in place, and yet expand in the same proportion I want it to expand.

Upvotes: 1

Jeremy
Jeremy

Reputation: 66

Try using the HTML<area> tag. This allows you to map coordinates to the donut. As in you don't even need to create a new element just specify where it is. It should work on videos too.

Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Upvotes: 0

Related Questions