-3
Galley,
In the link below, the top of the site, that is, the header that is the background photo along with the menu, they occupy the whole screen of the browser, indifernete de ser pc, tablet ou smartphone, how do I apply this effect?
2 answers
0
Create a <div>, for example <div class="barra-topo"> with the content: background, buttons, fields, etc. No CSS background use widht: 100%; so that the background fills the entire screen extension.
You will have to create the viewports to change according to the device. Note that the bar model is the same, but the content changes. Search by CSS media queries.
-
Not only in length, but in height too! understands me?
-2
Here’s what I wanted
* {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;
}
Credits: http://www.blog.andrerubiodesign.com.br/2013/10/div-ocupando-toda-altura-de-uma-pagina.html
Browser other questions tagged javascript html css html5 css3
You are not signed in. Login or sign up in order to post.
your doubt is not clear enough, can improve it?
– RFL
adjusted @Rafaelacioly
– Luiz Felipe
Since your question does not directly cover an excerpt of code, but how to do it, start by reading documentation of the API used on the site. Try to reproduce the effect you want and, if you can’t, come back here with your code.
– Woss
Play this effect with pure css or bootstrap?
– Luiz Felipe
Describe in the question in detail the effect, so that it is clear what you want without having to open the external link and try to guess. This would greatly increase the chance of an adequate response, or even the indication of an existing response with the solution.
– Bacco
If the doubt is only the image in "full screen", already has the solution here: Put a background image and make it responsive
– Bacco