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

Question

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

Asked 8 years, 3 months ago

Viewed 1,261 times

2

I want to place an image inside a div that occupies an entire body, that when you enlarge the screen with the mouse scroll, it continues following the size of the entire screen. Example of site with background like this: http://www.tecmundo.com.br/ When you increase the screen with the mouse scroll, the blue background follows the size of the screen. I believe it is inside the same div, with the exact size, but follow the body with the width. I’ve tried inside the div: width:max-body;

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

Who can help, thank you. Simple doubt, however, is important, because I can access the body something inside the div and etc. If you can do it with javascript, it also serves. HTML, CSS or Javascript. Thank you

                    <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. Thanks to those who help

1

What part are you talking about? It would be better [Dit] the question and for an example of what you tried to do and what is not working, it is easier to understand. If it’s just the header, it’s only by a width: 100% in the div. And if it doesn’t work, it’s because there’s something wrong with the CSS nesting, not with the DIV itself. Don’t forget to reset the body/html margin and padding

– Bacco

2016/03/31 at 19:11

3 answers

4

I still don’t understand what the difficulty is, but it follows a very simple example that already shows a header with full width and a full image background, no matter 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>

1

" Here closes the header (actually in the header was not to go neither text, nor aside etc, otherwise, it is not a header right? at most a small controls and navigation) " It was here my whole mistake, I was making the site inside a header. No matter how much I zoomed in on the screen, it was in its fixed size. It’s more because I learned to make website over the internet, in case, if one did the entire site within the header, I followed and am here today doing the same. Thank you, just that sentence saved me. Silly but saved . Thank you, haha

– henrique fernando

2016/04/04 at 16:41

Browser other questions tagged javascript html css

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

by Gabriel Garcia • **207** points · Answer 1 · 2016-04-01T17:30:43+00:00

If you are using any div with container idea with size of 970px for example, or any other value to give the width of the site and centralize it, you should create a div with width="100%" within that div vc put another 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>

by Matheus • **1,783** points · Answer 2 · 2016-04-01T18:58:31+00:00

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

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;
}