-3

Galera,

No link abaixo, a parte de cima do site, ou seja, o cabeçalho que é a foto de fundo junto com o menu, eles ocupam a tela toda do browser, indifernete de ser pc, tablet ou smartphone, como faço para aplicar este efeito?

https://www.templatemonster.com/pt-br/demo/61143.html

6
  • sua duvida não esta clara o suficiente, pode melhora-la?
    – RFL
    Commented 4/02/2017 às 23:53
  • ajustado @RafaelAcioly Commented 4/02/2017 às 23:56
  • Como sua dúvida não abrange diretamente um trecho de código, mas sim de como fazer, comece lendo a documentação da API utilizada no site. Tente reproduzir o efeito que você deseja e, caso não consiga, volte aqui com seu código.
    – Woss
    Commented 4/02/2017 às 23:59
  • 1
    Descreva na pergunta detalhadamente o efeito, para que fique claro o que quer sem que tenhamos que abrir o link externo e tentar adivinhar. Isso aumentaria muito a chance de uma resposta adequada, ou mesmo da indicação de uma resposta já existente com a solução.
    – Largato
    Commented 5/02/2017 às 0:05
  • 1
    Se a dúvida é só a imagem em "tela cheia", já tem a solução aqui: Colocar uma imagem de background e deixa-la responsiva
    – Largato
    Commented 5/02/2017 às 0:06

2 Respostas 2

0

Crie uma <div>, por exemplo <div class="barra-topo"> com o conteúdo: background, botões, campos e etc. No CSS do background use widht: 100%; para que o fundo preencha toda a extensão da tela.

Você terá que criar as viewports para que se alterem de acordo com o aparelho. Veja que o modelo da barra é a mesma, porém o conteúdo se altera. Pesquise por CSS media queries.

inserir a descrição da imagem aquiinserir a descrição da imagem aqui

1
  • Não só no comprimento, mais no height também! me entende? Commented 5/02/2017 às 21:32
-2

Eis o que eu queria

* {margin:0; padding: 0;}
html, body {
    height:100%;
}
.header {
    width:100%; 
    height:auto; 
    min-height:100%; 
    /* 
    aqui é onde acontece a mágica, 
    a propriedade height:auto e min-height: 100% 
    fará com que esta div ocupe sempre a altura total 
    do navegador, mesmo quando redimensionado 
    */
    background:cornflowerblue;
}

Creditos: http://www.blog.andrerubiodesign.com.br/2013/10/div-ocupando-toda-altura-de-uma-pagina.html

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