CSS Viewport issue: vh vs. 100%

Question

I code a responsive Website with HTML & CSS. I use the Bootstrapper framework.

My issue: when I use 100% for a background image, the image will not reach the end of the page on Desktop screens (because the image scaled with 100% height is smaller than the monitor resultion). On iPhone (Safari) it will look nice. The footer will be underneath the image.

When I use the Viewport-value 100vh the result on the Desktop Screen will look nice (Image will fill the background), but on mobile Devices (iPhone), the text will overlap the footer. Looks horrible.

I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?

HTML-Code:

  <section id="myid"> <div class="myclass"> <div class="container"> <div class="row"> <div class="col-md-8 opaline"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <p>Great Content</p> </div> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-md-10"> <p>Great Footer Content</p> </div> </div> </div> </footer> 

CSS: (OK-Result on Mobile Browser)

 .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; padding-top: 36px; } 

CSS: (OK-Result on Desktop Browsers)

 .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; padding-top: 36px; } 

I also played with the calc function - with no success:

 height: calc(100vh - 000px); 

000 = height of the footer

Answer 1

I looking for a solution like: on Desktop use 100vh, on Mobile use 100%. Is that possible?

if thats what you looking for, you can use the - @media CSS at-rule -

The @media CSS at-rule can be used to apply styles based on the result of one or more media queries, in your case the screen size.

read more mdn doc

w3schools exemples are nice

edit : found something that might be relevant css-tricks

I applied what was on css-trick on the code you provided code

 @media only screen and (min-device-width: 1000px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; padding-top: 36px; } } @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { .myclass { /* The image used */ background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1)); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; padding-top: 36px; } } 

 <section id="myid"> <div class="myclass"> <div class="container"> <div class="row"> <div class="col-md-8 opaline"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <p>Great Content</p> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="container"> <div class="row"> <div class="col-md-10"> <p>Great Footer Content</p> </div> </div> </div> </footer> 

---

---

Edit -2- : from the answer you replayed :

Desktop Screen (1920x1200px resultion)

and in the code you posted you used

 @media only screen 
 and (min-device-width: 1000px) 
 and (max-device-width: 1600px)`

try to change the 'max device width' query value to the wanted resultion - 1920px (and up)

---

Edit -3- :

as you just replied in your solution, because the desktop view is the default one, removing the resolution pixel range completely from the desktop media query will might do the trick

Answer 2

Do you talk about that this works well only for iPhone or to all mobiles?

Because if this works in all mobiles views, you can use @media to do it.

Maybe these links can help you:

Using media queries

Media Queries for Standard Devices

Using the viewport meta tag to control layout on mobile browsers

Responsive Web Design - Media Queries

Answer 3

Thanks for the hint to @media

So I build this "switch". It works well on an iPhone 6S, but on an Desktop Screen (1920x1200px resultion) the style will not appear at all. Where is my mistake?

 /* Mobile Device */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) { .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; padding-top: 36px; } } /* Desktop Screen */ @media only screen and (min-device-width: 1000px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; padding-top: 36px; } } 

Answer 4

Solved it like this:

 /* Mobile Devices */ @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) { .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; padding-top: 36px; } } /* Desktop Screen */ /* Mobile Devices */ @media only screen { .myclass { /* The image used */ background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; padding-top: 36px; } }