Specific section of an image should always be visible - CSS and Responsiveness

Hi Campers,

For a project I am working on I need a specific section of an image always being visible in the viewport of any device. More specifically, an object (a chair) should be always present in the viewport, either you see at it as landscape or portrait.

In my example below (codepen) the target chair is in the right bottom corner of the image:

You should see the pen with developer tools and verify for different mobile views to better understand my question.

I have partially achieved the goal. You will also notice that the view doesn’t overflow, which is also required.

What I am questioning is my technique. I am currently using background images in wrapped elements and then scaling / translating the background image using CSS media queries accordingly. However I haven’t found a solution that is consistent for any simulated device in developer tools (Chrome).

Any suggestion of how to improve this?

You will notice that there is still some white margins in some views too. Any way to get rid of them?

Hey evaristoc.

I suggest you use something like this:

 background-size: cover;
 background-position: right;

It is not an advanced solution, but it causes the chair to always be in view.

Also, remember, most browsers place their own CSS (margin and padding) to begin with. So, it is often common to see many developers use this as their first lines of CSS:

* {
 margin: 0;
 padding: 0;
}

Hope this helps

Thanks for your reply, @Sky020. That was really simple and helpful!

I need to do more with this project, hopefully I will get more help from you all through the process.

C u around!