How do I make an image appear on the full screen only in mobile mode?

Asked

Viewed 960 times

2

Are two site templates, the desktop (Which is already ok) and mobile.

In mobile, I want it to display a black background with JUST an image occupying the center of the screen. The entire length (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.

inserir a descrição da imagem aqui

This is an example I made in Fiddle: http://jsfiddle.net/gtw7375/yrmbsfhu/

But, I don’t know 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?

css html5 twitter-bootstrap css3 mobile

1 answer

1


So what you want is not the image as html background, but the background only of the first page. 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');
}

Browser other questions tagged css html5 twitter-bootstrap css3 mobile

You are not signed in. Login or sign up in order to post.