CODEWITHSUNDEEP
htmlcssbackground-image
Colin Bruin
Colin Bruin

Reputation: 93

How do I set the background img over the footer

I want the picture to cover everything on the page but the <header> however, there is always a white strip of space on the bottom. I used margin-right and margin-left to cover the sides, but margin-bottom does not fill in the white space on the bottom.

header {
  margin-bottom: 20px;
}
h1 {
  text-align: center;
}
nav {
  text-align: center;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
li a {
  color: black;
  text-decoration: none;
}
#wrapper {
  background-image: url(rome.jpg);
  -webkit-background-size: 100% 600px;
  background-repeat: no-repeat;
  height: 600px;
  margin-right: -8px;
  margin-left: -8px;
}
<header>
  <h1>Colin Bruin</h1>
  <nav>
    <ul>
      <li><a href="home.html">Home</a>
      </li>|
      <li><a href="code.html">Code</a>
      </li>|
      <li><a href="webpages.html">Webpages</a>
      </li>|
      <li><a href="articles.html">Articles</a>
      </li>|
      <li><a href="resume.html">Resume</a>
      </li>
    </ul>
  </nav>
</header>
<div id="wrapper">

  <main>

  </main>
</div>

Upvotes: 2

Views: 59

Answers (2)

dippas
dippas

Reputation: 60563

body has by default some margin that's why you are seeing that bottom space so as the left/right space too (which you used negative margin to hack fix it).

To solve this set margin:0 in body, and you won't need the negative margins for left/right 

body {
  margin: 0
}
header {
  margin-bottom: 20px;
}
h1 {
  text-align: center;
}
nav {
  text-align: center;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
li a {
  color: black;
  text-decoration: none;
}
#wrapper {
  background-image: url(//lorempixel.com/1000/1000);
  -webkit-background-size: 100% 600px;
  background-repeat: no-repeat;
  height: 600px;
}
<header>
  <h1>Colin Bruin</h1>
  <nav>
    <ul>
      <li><a href="home.html">Home</a>
      </li>|
      <li><a href="code.html">Code</a>
      </li>|
      <li><a href="webpages.html">Webpages</a>
      </li>|
      <li><a href="articles.html">Articles</a>
      </li>|
      <li><a href="resume.html">Resume</a>
      </li>
    </ul>
  </nav>
</header>
<div id="wrapper">
 <main>
  </main>
</div>

Upvotes: 2

MarioZ
MarioZ

Reputation: 997

Like this?

height:100%;
 margin:0;
 padding:0;

}
header {
  margin-bottom: 20px;
}
h1 {
  text-align: center;
}
nav {
  text-align: center;
}
ul {
  list-style-type: none;
}
li {
  display: inline;
  padding-right: 5px;
  padding-left: 5px;
}
li a {
  color: black;
  text-decoration: none;
}
#wrapper {
  background-image: url(https://placekitten.com/g/1000/1000);
  -webkit-background-size: 100% 600px;
  background-repeat: no-repeat;
  height: 600px;
}
</style> </head>
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Colin's Page</title>
  <meta charset="utf-8">

  <body>
    <header>
      <h1>Colin Bruin</h1>
      <nav>
        <ul>
          <li><a href="home.html">Home</a>
          </li>|
          <li><a href="code.html">Code</a>
          </li>|
          <li><a href="webpages.html">Webpages</a>
          </li>|
          <li><a href="articles.html">Articles</a>
          </li>|
          <li><a href="resume.html">Resume</a>
          </li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">

      <main>

      </main>
    </div>
  </body>

</html>

Upvotes: 0

Related Questions