Keep High of Background image to the entire screen in Portrait and Landscape

Navigation
0

I have a background image in an element that is 100% height and width.

CSS 

#splash{
    background-image: url("../img/background_splash.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height:100%;
}

HTML 

 <body>
     <section id="splash">
         //contenido
     </section>
 </body>

Try using vh and vmax but do not achieve anything.

Everything works well in all resolutions, except when I go to landscape from the cell phone. That is, the height does not come to occupy the entire screen if not to where it was rendered the first time in Portrait. As the content exceeds the screen, I have to scroll and when I scroll the white below.

Any ideas?

I already appreciate the interest.

    
asked by codetojoy 02.05.2017 в 19:58
source

1 answer

0

Well I can solve it and leave here the code in case someone serves, the trick is to use 

vmax
in the child element, a smaller image for mobile and also 
100% height
in the parent elements 
@media (max-width: 768px){
#splash, .background-body {
background-image: url(../img/background_splash_mobile.jpg);
height: 100vmax !important;
}}
    
answered by 02.05.2017 в 21:03
Read the csv file and delete it in C Installation error .NET application (GAC)