How do I make an image display in full screen only in mobile mode?

Question

How do I make an image display in full screen only in mobile mode?

Navigation

#1 by (1 votes)

2

There are two site templates, the desktop (which is already ok) and the mobile.

On mobile, I want it to display a black background with ONLY an image occupying the center of the screen. EVERY extension (height and width) of the screen has to be just this content. After I press a button, the page scrolls down and the content is displayed.

ThisisanexampleImadeonFiddle: link

But, I'm not sure how I can center the image and leave it as the only content occupying the entire height / height of the page.

How to do this?

html5 css css3 twitter-bootstrap mobile

asked by anonymous 09.12.2015 / 19:52

1 answer

Android / IOS vs Java How to implement google reCAPTCHA using classic asp

score 1 · Accepted Answer

So what you want is not the image as the background of the html, but rather as the background of the first page only. If so, use the code below:

// html
<!DOCTYPE html>
<html>
    <head>...</head>
    <body>
        <div id="homepage" class='pageFull'>Logo e slogan</div>
        <div id="page1" class='pageFull'>Página de abertura</div>
    </body>
</html>

// css
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}
.pageFull {
    min-height: 100%;
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-attachment: fixed; /* opcional, dá um efeito melhor*/
}
#homepage {
   background-image: url('homepage.jpg');
}
#page1 {
   background-image: url('page1.jpg');
}