Streaming live at 10am (PST)

Fix element position relative to a background image


I’m stuck with one question – is there a way to stick an animated .png to the exact place on a background image. Let’s say I have a windmill as a background and I need to animate blades. How can I set blades to remain position on different breakpoints?

Thanks in advance.


Having a hard time envisioning what you’re trying to do, maybe screenshots or a read-only link will help.

From what I understand though, if you set an object to absolute and then set its container to relative, you should be able to move the element around in that container to a specific spot and it should stay there for the most part.

“Container” doesn’t have to be an actual container, can be a div or section.

You are right

Here is an image, I need to cut blades from a couple of towers and make them slowly rotate. So basically I’ll have three images: background and two pngs above it. But I can’t fix blades position and when I change the browser size the background resizes but the blades stay the same and do not fit towers. I hope it makes sense now. Pardon my English.

Did you find a solution for this?

Hello, unfortunately, no

If you are simply trying to make the blades rotate, I would suggest you do this separately in After Effects or Photoshop animation. You could export the animation as a gif and use this as your background image?

I’m having the same problem but with interactive pngs that I want to place on top of an image. The png elements are clickable and tooltips appear upon hover. I want the pngs to stay in the same place within the background image. If anybody has a solution for this, let me know!

Hey, I think it can be editable and further adds on it then it might be possible to do that. Some time Picture resolutions are destroy when we add any changes on it.
Regards: chalice coral id