Background cover image on 100vh - screen differences

css background background-image viewport viewport-units
MichalObi picture MichalObi · Aug 16, 2016 · Viewed 7.5k times · Source

So i try to set image on cover with 100vh - but i have very specific situation.

On my image i have big plate and tablet that "lie down" on this plate.

My goal is to make this image 100vh header but there is a problem - when i try test this on my big monitor it looks ok, but on monitor with smaller height it's look bad -i need this tablet to be 100% visible in all desktop devices.

Check my fiddle with "Full page" option to see what i'm about.

I also try to make this image cover without tablet, and then try to place another image with tablet and position:absolute, but my second image isn't always in exact same place to feet this plate insade frame.

Is it possible to achieve what i desire ?

Answer

Seba Maldonado picture Seba Maldonado · Aug 16, 2016

A fast workaround to all desktop devices will be to set 

background-position: bottom right;

Related questions

CSS3 background image transition

I'm trying to make a "fade-in fade-out" effect using the CSS transition. But I can't get this to work with the background image... The CSS: .title a { display: block; width: 340px; height: 338px; color: black; background: transparent; /* TRANSITION */ -webkit-transition: background 1…

Read More
CSS: background image on background color

I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before. So if …

Read More
How to stretch the background image to fill a div

I want to set a background image to different divs, but my problems are: The size of image is fixed(60px). Varying div's size How can I stretch the background-image to fill the whole background of the div? #div2{ background-image:…

Read More