2

São dois modelos de site, o desktop (Que já está ok) e o mobile.

No mobile, eu quero que ele exiba um fundo preto com APENAS uma imagem ocupando o centro da tela. TODA a extensão (altura e largura) da tela tem que ser apenas este conteúdo. Após eu apertar um botão, a página desce e é exibido o conteúdo.

inserir a descrição da imagem aqui

Este é um exemplo que fiz no Fiddle: http://jsfiddle.net/gtw7375/yrmbsfhu/

Mas, não sei como posso centralizar a imagem e deixá-la como único conteúdo ocupando toda a altura/height da página.

Como fazer isso?

1 Resposta 1

1

Então o que você quer não é a imagem como fundo do html, mas sim como fundo apenas da primeira página. Se for isso, utilize o código abaixo:

// 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');
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .