Method for making image stay in same position?

HTML & CSS
1

I want this bubble to stay in the same position without getting interrupted by screen size.

I don’t remember the Absolute URL for these.

Small screen:

image

Full screen:

image
image1294×583 89.4 KB

I used different content in pictures but same subject.

2

Have you considered putting the images in a container (make it relative positioned), setting the big image into the background and making the speech bubble absolute with percentages instead of fixed units like pixels? The idea here is that by putting them together in the element, it will position the bubble in relation to its container, keeping it always on top of the image. Then as it flexes, the percentage will allow it to flex with the container. Might need some tweaking to the idea but putting them together in the same container and putting the background image into the background will get you close.

2 Likes
3

You should try to give absolute values to width and height for the image with a position fixed value, for example:

img {
width: 425px;
height: 225px;
position: fixed;
}

4

Here’s an example just modified from something else. Its not perfectly aligned but close enough to give you the idea.

I used css for the bubble rather than an image but an image would be simpler to position as you won’t have all the overhanging bits of bubble to content width.

3 Likes
5

The lion looks funny with the bubble xd.

So you set the parent container’s position to relative, then set the child container’s to absolute and that will fix the problem of bubble changing its position when resizing?

1 Like
6

Nope, will do that rn

7

The bubble is in the html and the big dude is in the background.

I tried it, and I got lucky.

I did 50% on bottom and 50% on left with parent container in relative and child in absolute. gg

1 Like
8

That is typically how you would use absolute positioning, with the parent being set to relative.
It then positions the child element in the context of within the parent.

2 Likes
9

or within a div with absolute positioning and a little padding for img element:

div img {
width: 425px;
height: 225px;
position: relative;
Padding: 5%;
}

10

I mean:

.wrapper
position: absolute;
}

div.wrapper img {
width: 425px;
height: 225px;
position: relative;
Padding: 5%;
}