How to make the background inside a div occupy the entire body

Question

How to make the background inside a div occupy the entire body

Navigation

#1 by (4 votes)
#2 by (2 votes)
#3 by (2 votes)

2

I want to put an image inside a div that occupies a whole body, that when you increase the screen with the mouse scroll, it continues to follow the size of the whole screen. Example site with background like this: link When you enlarge the screen with the mouse scroll, the blue background follows the size of the screen. I believe it is within the same div, with the exact size, but follow the body with the width. I already tried to do inside the div: width: max-body;

width: 1000%; (It was the worst of all, had to put all the data to the left and according to the roll of the screen with the mouse, an hour would not give.)

Who can help, thank you. Simple question, though, is important, as I can access something from the body inside the div and so on. If it can do with javascript, it serves as well. HTML, CSS or Javascript. Thanks

                    <style>
            body {
                margin: auto;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
               }              
                    div#cabecario {
                min-height:1780px;
                width: 1000px;
                position:relative;
              }

                 div#fundo {
                background-color:#C0C0C0;
                text-align: center;
                background-image: url("../imagem/logo1.jpg");
                background-size: 100%100%;
                background-repeat: no-repeat;
                height: 15%;
                width: 100%;
                background-color: black;
                position: absolute;
                top:3%;
            }
</style>


<html>
     <body> 
            //Aqui não tem nada
    <div id="cabecario">
            //Aqui também não tem nada
    <div id="fundo">
           //Aqui é somente para deixar a imagem no início do cabeçário, que começa no top 0%.
             </div>
                 // Aqui vem as outras informações, como aside, p, textos, imagens, etc
               </div>
             //Aqui fecha o cabeçário
                   </body>
                    //Fechou o body
                      </html>

Currently, my code is like this. I used some codes that answered below but did not fix it. Thanks to those who help

javascript html css

asked by anonymous 31.03.2016 / 20:56

3 answers

2

If you're using some div with a container size of 970px for example, or any other value to give the width of the site and center it, you should create a div with width="100%" within that div you place one with a specific width to center the site in the middle.

For example:

<div style="background-color: red; width:100%;">
   <div style="width:970px; margin: auto;">
      {AQUI VOCÊ INSERE O CONTEUDO DESEJADO}
   </div>
</div>

01.04.2016 / 19:30

2

The idea is to set the background in the body and center it, where it will not be resized when zoomed in.

It would look like this:

body {
  background: url('https://algumaimagem.jpg') no-repeat center center fixed;
  margin: 0 0 100px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

01.04.2016 / 20:58

as per values inside objects [closed] Why is PUBLIC and xmlns declared using site w3.org?

score 4 · Accepted Answer

I have not yet understood the difficulty, but it follows a very simple example that already shows a with full width and a background with fully populated image, no matter what the page size:

body, html {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}

#cabecalho {
  width:100%;
  height:120px;
  background:#06c;
  color:#fff;
}

#fundo {
  height:80px;
  background:url(http://lorempixel.com/800/400) no-repeat center;
  background-size:cover;
}

<html>
  <body> 
    <div id="cabecalho">
      <div id="fundo">
      </div>
      Aqui vem as outras informações, como aside, p, textos, imagens, etc
    </div>
    Aqui fecha o cabecalho (na verdade no cabeçalho nao era pra ir nem texto, nem aside etc, senão, não é um cabeçalho né? no máximo uns controles pequenos e navegação)
  </body>
</html>