Pure responsive image on all devices?

[starkle]

Without using a library I need to create a responsive image that will cover something specific. So I need to stick it onto a specific location.
It should stay exactly at the same place on all devices no matter what resolution the visitor is on.

https://codepen.io/RobinSxD/pen/qYdLbW

Thx!

[Paulie_D]

Your codepen doesn’t really clarify or demonstrate the problem.

This sounds like a simple overlay….which can be managed by absolute positioning.

[starkle]

Hi Paulie.

Thank you.
The Image appears inside of a child div and needs to cover a specific area, at all times, and support all devices on all resolutions..
How exactly would you make this pen to work without adding any library or js?

As for the pen, I only included the pen to show the code without affecting the view.

I know of several ways but not how to work with this example.
Could you perhaps demonstrate what you mean?

Appreciate your time put into this so far
Cheers!

[Paulie_D]

As I said…Your codepen doesn’t really clarify or demonstrate the problem or explain what you are trying to do.

What specific area…of what element?

Is the image larger than the element or smaller….

Why does it need to “cover” the element..or does it?

Is this an overlay or a background?

Are you trying to hide something behind it or highlight something in front of it?

Perhaps you have a design image of what it is you are after or an example of what you have tried so we can tinker with the existing code…at least a minimal version of it.

[Author]

Posts