My background wont fit the whole page

HTML-CSS
#1

Tell us what’s happening:
At the top and bottom i see a little white bar that i want to remove. I’ve searched on internet, but putting my height to 100% doesnt work. Ive tried alot of things but cant seem to work it out

Your code so far

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!DOCTYPE html>
<html>
<div id="main">
  <body>
  <div id="background">
    </body>
  
  <h1 id="title">Barack Obama</h1>
  <h2>Former USA President</h2>
  <div id="img-div">
    <img id="image" 
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8d/President_Barack_Obama.jpg/1200px-President_Barack_Obama.jpg" alt="Barack Obama">
    <h3 id="img-caption">Former USA President</h3>
      
  <p id="tribute-info">Obama's life:</p>
   <ul>
     <li><strong> 1961-</strong> Barack Obama was born on August 4, in Honolulu Hawaii  </li>
     <br>
     <li><strong> 1979-</strong> Obama went to the Occidental College in Los Angeles. </li>
     <br>
     <li><strong> 1981-</strong> Obama made his first public speech. He transferred to Columbia University to major in political science.</li>
     <br>
     <li><strong> 1983-</strong> Obama graduated from Columbia University with a Bachelor of Arts degree, magna cum laude. </li>
     <br>
     <li><strong> 1988-</strong> Obama began to study at Harvard Law School.</li>
     <br>
     <li><strong> 1990-</strong> On February 5, Obama became the first black president of the Harvard Law Review.</li>
     <br>
     <li><strong> 1991-</strong> Obama graduated Harvard with his law degree and began work on his book Dreams of My Father.</li>
     <br>
     <li><strong> 1996-</strong> Obama was elected to the Illinois Senate.</li>
     <br>
     <li><strong> 2005-</strong> On January 5, Obama was sworn in as a U.S. Senator </li> 
     <br>
     <li><strong> 2009-</strong> On January 20, Obama was sworn in as the 44th President of the United States. </li>
     <br>
     <li><strong> 2017-</strong> January 20th marked Obama's last day in the office. </li> 
     </ul>

    <a id="tribute-link" href="https://nl.wikipedia.org/wiki/Barack_Obama" target="_blank"> Read More About Obama</a>
  
</div>

</div>
  </html>

img{
  max-width:20%;
  display:block;
  margin:auto;
  border-radius:20px;
  box-shadow:20px;
}
h1{ 
text-align:center;
font-family:Sans-serif;
font-size:bold;
}
h2{ 
text-align:center;
font-style:italic;
font-size:15px;
margin-top:-1em;
}
#img-caption {
  font-style:italic;
  font-size:15px;
  margin-top:0.5em;
  text-align:center;
}
p {
  text-align:center;
  font-size:20px;
  font-style:bold;
  text-color:black;
  font-weight:900;
}
ul { 
max-width: 550px;
  margin: 0 auto 50px auto;
  text-align: left;
  line-height: 1.6;
} 

li{ 
margin: 0.1px 0;
} 


#background { 
background-size:100% 100%;
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36.

Challenge: Build a Tribute Page

Link to the challenge:

1 Like
#2

Hey @Nqek. Can you please share your CodePen URL. It’s easy to check your code there.
Thanks.

#3
1 Like
#4

Hello there.

Some things to note when using CodePen:

  1. CodePen does not expect any content outside the body tags in the HTML box. The body tag is the tag that contains all the elements in the page, it can’t be a child of a div element. Delete the html tags, the body tags and the DOCTYPE declaration - those are all created in the background by codepen itself.
  2. The editors offer the ability to format and analyze your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

1 Like
#5

Hey @Nqek. There are many problems with your code:

  • Why did you create a div with class background? If you want to add background image that fits the entire screen, you need to add background-image property to your body tag. If you do so, the background will fit the entire screen. So, now onwards, if you want to create backgrounds, don’t add a separate div for that.

  • You don’t need to add the entire HTML tags in CodePen. You only need to enter the code that goes in the body tag in CodePen’s HTML box. If you want to add code that goes in the head tag, click on the settings icon at the top of the HTML box, and then enter it inside “Stuff in HTML” box.

FInal Result:

Screenshot 2020-10-15 165957
Screenshot 2020-10-15 1659571918×776 265 KB

Happy Coding!

1 Like
#6

thank you both so much :smiley: problem solved

#7