Background image not covering whole page

Question

Hi all, One of the pages of a site I'm working on has some kind of error when using the "background-image: cover" rule, the image displayed is fully covering the page and leaves a green border at the bottom, which is actually the background color of the body. This happens when the page is rendered in a window that is a little bit higher than the background image.

Furthermore, when using Chrome's developer tools, there is no element to be selected in that section of the page, so I can not figure out what is the cause of the error.

You can see a screenshot here: http://www.mediafire.com/view/94qapcb5gg3vcpp/Lower%20border.png

The code is as follows:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Diego Vid Eco</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div id="headerWrapper">
      <header>
        <h1>Diego Vid Eco</h1>
        <h2>Compositor</h2>
        <nav>
          <ul>
          <li><a href="index.html" class= "selected">Dossier</a></li>
          <li><a href="acerca.html">Acerca</a></li>
          <li><a href="contacto.html">Contacto</a></li>
          </ul>
        </nav>
      </header>
    </div>
    <div id = "background">
    <div id=wrapper>
      <section class = "acerca">
      <p>
        Diego Villaseñor nace en 1986 en la Ciudad de México. Es compositor, improvisador, multi-instrumentista y filósofo. Desde sus primeros encuentros con los instrumentos musicales goza de la improvisación experimentándola como la fuente primordial de toda su música.</p>
    <p>Ha estudiado con compositores tales como Julio Estrada, Ulises Ramírez, Christopher Luna, Salvador Rodríguez y Gabriela Ortiz, lo cuales han influido, de muy distintas maneras, en el desarrollo de su intuición musical. Su experiencia como filósofo determina profundamente su trabajo como creador musical, mas no únicamente desde un aspecto conceptual, sino desde uno profundamente práctico, ayudándolo a disponerse y aproximarse a la música desde perspectivas y procesos inusuales. Así por ejemplo, las obras de corte fenomenológico Espíritu penetrando-deviniendo Árbol escrita para Wilfrido Terrazas; la “numerológica” 21 Nubes ejecutada por el Quinteto de Alientos de la Ciudad de México a finales del 2013; o la descriptiva, del funcionamiento de un bosque, Redwood Region (co-escrita con Christopher Luna), comisionada por The Luna Ensemble e interpretada en varias salas de EUA.  
      </p>  
      </section>
      <footer>
        <a href = "http://www.soundcloud.com/diegovideco"><img src = "img/Soundcloud-Icon.png" alt = "Soundcloud Icon" class = "social-icon"></a> 
        <a href = "http://www.facebook.com/axvdejl"><img src = "img/facebook-Icon.png" alt = "Soundcloud Icon" class = "social-icon"></a> 
        <p>&copy; Diego Villase&ntilde;or de Cortina 2015</p>
      </footer>
    </div>
    </div>
  </body>
</html>

/*===============
     GENERAL
================*/

/*
font-family {

 }
*/

a {
  text-decoration: none;
}

iframe {
  width: 100%;
  height: 300px;
  opacity: 0.5; /* all modern browsers */
  filter: alpha(opacity=5) /* IE */
}
iframe visualAudible {
  opacity: 0;
}

* {
box-sizing: border-box;
}  

.cita p,
h4,
.acerca:first-child, 
.contacto p {
  margin-top: 0;
  padding: 10px;
}

/*===============
     FONT
================*/

h1 {
 font-size: 2.1em;
}

p {
  font-size: 1.2em;
  color: white;
}

a {
  color: white;
  font-weight: 800
}

a:hover {
  color: #bbb;
}

/*===============
     BODY
================*/
/*
#headerWrapper {
  width: 100%;
}
*/

body {
 background: #598839;
}


#background {
  background-image: url("../img/Tormenta.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position:center;
}

#wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 5%;
  height: 100%;
} 




/*===============
     Header
================*/
header {
  background: black;
  max-width: 100%;
  margin: -16px 0 0 0;
  padding-top: 1%;
}

h1{

  margin: 0 0 10px 0;
  padding: 16px 0 0 0;
}

h1,
h2 {
  float: left;
  text-align: center;
  width: 100%;
  color: grey;
}

h2 {
  margin-top: 3px;
}

/*===============
     Navigation
================*/

nav {
 text-align: center;
 padding: 10px 0 5px;
 margin: 5px 0 0;
 max-width: 100%;
}

nav ul {
 list-style: none;
  padding: 0;
}

nav li {
  display: inline-block;
  padding: 0%;
}

nav a {
  padding: 15px 10px;
  font-size: 1.7em;

}

nav .selected {
  color: #888;
}

#masinfo {
  background: #111;
/*  padding: 0 -14px -13px -14px;*/
  overflow: auto;
}

#masinfo li {
  margin: 1px;
  padding: 5px 5px 0;
  color: #787
}
/*===============
     CITA
================*/

.cita {
  max-width: 100%;
  text-align: center;
}

.autor {
/*  max-width: 85%;*/
  text-align: right;
}


/*===============
     GALLERY
================*/

.gallery {
  margin:0;
  padding: 0;
  list-style: none;
/*  overflow: auto;*/


}

.gallery li {
  max-width: 40%;
  max-height: 40%;
  padding-bottom: 1%;
  margin: 1% 4%;
  float: left;
}

.gallery .mas {
  font-size: 1em;
  font-weight: 500;
  color: #dd8;
}

.mas:hover {
  color: #ee8;
}


/*===============
  + INFO 
================*/
h4 {
  text-align:center;
  font-size: 1.7em;
}

.score img {
  float: left;
  max-width: 40%;
  margin: 0 auto;
}

#wrapscore {
  max-width:40%;
  float: left;
}

#wrapscore ul {
    list-style: none;
    padding:0;
}

/*#wrapscore li,*/
#wrapscore img {
  float: left;
  max-width: 100%;
  display: inline-block;
  margin: 0 0 5px;
}

.notas {
  float: right;
  max-width: 55%;
  margin-left: 2.5%;
  text-indent: 50px;
  text-align:justify;
}

.sound iframe{
  height: 5%;
}

.italicas {
  font-style: italic;
}

/*===============
  Acerca 
================*/

.acerca,
.contacto {
  text-align: justify;
}


/*===============
  FOOTER 
================*/

footer {
  text-align: center;
  padding-top: 50px;
  clear: both;
}

footer p {
  margin-bottom: 0;
  padding-bottom: 15px;
}

.social-icon:hover {

    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */

  -webkit-transition: 0.3s all ease-in;
  -o-transition: 0.3s all ease-in;
  -moz-transition: 0.3s all ease-in;
  transition: 0.3s all ease-in;
}

.social-icon {
  height: 60px;
  width: 60px;
  margin: 0 5px;
}


/*===============
  FLOAT CLEARFIX
================*/

.group {
  content: "";
  display:table;
  clear: both;
}



/*===============
  MEDIA QUERIES
================*/

@media (min-width: 1400px) {
  #wrapper {
    max-width: 100%;
  }
  .gallery li {
    max-width:23%;
    padding: 1.5%;
    margin: 0.5%;

  }
  .sound {
  margin-top: 80px;
  float: right;
  width: 55%;
  }

  #wrapscore img {
    width:100%;
}
}

@media (max-width: 1399px) {
  .sound {
  margin-top: 10px;
  float: left;
  width: 40%;
  clear:left;
  }
}

@media (max-width: 480px) {
  .gallery li {
    max-width:100%;
/*
    max-height: 70px;
*/
    padding: 7%;
    margin: 5px auto;
  }

  .notas,
  .score,
  .score {
    max-width:100%;
/*
    max-height: 70px;
*/
    margin: 10px auto;
    display: inline-block;
  }

/*
  .score img {
    max-width: 100%;
    margin: auto;

  }
*/

  .sound {
  width: 100%;
  }



  .cita,
  .autor {
    display: none;
  }

  #wrapscore {
    max-width: 100%;
    margin: 5px auto;
  }
}

Thanks a lot for all you help.

Answer 1 · 2015-02-02T22:06:30Z

February 2, 2015 10:06pm

Hi Diego Villaseñor,

Have you tried setting the height for html and body to 100%?

Answer 2 · 2015-02-02T22:43:46Z

February 2, 2015 10:43pm

Hi Guil, thanks for the answer. I tried it, but the problem persists.

Answer 3 · 2015-02-02T22:47:29Z

February 2, 2015 10:47pm

Fantastic! Thank you very much.

Answer 4 · 2015-02-02T23:08:14Z

February 2, 2015 11:08pm

Actually upon further inspection, something very wierd happened. The "Acerca" page was fixed, but every other page got the error. It realized it had something to do with the #background {height:100%}, so I made a special ID "#backgroundAcerca" for the height on that page. It worked, but I still feel that I must have made some kind of mistake along the way, do you think it might be something regarding syntax, a typo or something like that?

Welcome to the Treehouse Community

Looking to learn something new?

Diego Villaseñor

Diego Villaseñor

Background image not covering whole page

4 Answers

Guil Hernandez

Guil Hernandez

Diego Villaseñor

Diego Villaseñor

Guil Hernandez

Guil Hernandez

Diego Villaseñor

Diego Villaseñor

Guil Hernandez

Guil Hernandez

Diego Villaseñor

Diego Villaseñor