Hi, I’m wondering why my background doesn’t take the whole screensize when i’m scrolling down the page.
I tried to set the body height to 100%, 100vh but both don’t work. Not sure if something else is causing it.
body {
background-image:linear-gradient(#C8CB8B,#BCBF88, #6F7051);
width:100%;
height:100%;
font-family:tahoma, sans-serif;
padding:0;
margin:0 auto 0 auto;
}
#title {
text-align:center;
color:#fffec5;
}
/*image banner*/
#img-div {
margin:0 auto;
padding:0;
width:1500px;
/*background-color:red;*/
text-align:center;
}
#image {
width:800px;
margin-top:0;
}
#img-caption p {
margin-top:0;
}
/*END image banner*/
/*START: navigation bar*/
header {
width:100%;
height:50px;
background-color:#eeec9f ;
position:fixed;
}
nav > ul{
list-style-type:none;
text-align:center;
padding:0;
font-size:35px;
/* background-color:red;*/
margin:0;
}
nav > ul > li {
display:inline;
padding:0 30px 0 30px;
/* background-color:yellow;*/
}
nav > ul > li > a{
text-decoration:none;
color:#403f0d ;
}
ul > li > a:hover {
color:#000000 ;
}
/*END: navigation bar*/
/*START MAIN*/
main {
height:100vh;
}
#tribute-info {
width:1500px;
height:150px;
margin:0 auto;
/*background-color:blue;*/
text-align:left;
}
.paragraph {
margin:10px;
font-size:20px;
}
.gallerybox {
width:1500px;
height:100px;
margin:100px auto;
/*background-color:green;*/
text-align:left;
}
.gallerybox > h2 {
padding:10px;
}
.gallery {
height:750px;
width:1500px;
/*background-color:orange;*/
}
.gallery img {
width:100%;
max-width:370px;
height:370px;
object-fit:cover;
border-radius:10px;
}
/*END MAIN*/
/*footer {
background-color:blue;
height:50px;
width:100%;
position:relative;
bottom:0;
}*/
<!DCOTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css">
<title>In loving memory Picasso</title>
</head>
<body>
<!---START Navigation bar--->
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Information</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<!---END Navigation bar--->
<!---START MAIN--->
<main id="main">
<h1 id="title">In loving memory Picasso</h1>
<!---START IMAGE BANNER--->
<div id="img-div">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker32.jpg" alt="Picasso closeup" id="image">
<div id="img-caption"><p >Close up picture of Picasso</p></div>
</div>
<!---END IMAGE BANNER--->
<div id="tribute-info"><p class="paragraph">Picasso is one of my very favorite wild horses, and has been since I first met him on a fall day at the last helicopter roundup in Sand Wash Basin in 2008. It was a horrible roundup, with horses slamming into panels and 11 horses dying before it was over..<br>Now it has been a year since anyone has seen Picasso and the Grand Old Man of the Basin is believed to have gone to his final rest, in his home in Sand Wash Basin. This noble, proud, colorful and gentle stallion who lived over 30 years has been able to live his entire life wild and free – he is a symbol of the very best of our wild horses in America and I feel privileged and thankful to have been able to have met him and followed his story in the last decade of his life. His legacy lives on in his many offspring, and in the hearts of those who have loved him over the years. He will always be remembered.</p>
<p class="paragraph">Would you like to visit the source of the text I used for this exercise?<br><a href="https://www.wildhoofbeats.com/blog/a-tribute-to-picasso-iconic-wild-stallion-of-sand-wash-basin" alt="link info laika" target="_blank" id="tribute-link">Visit the original page</a></p></div>
<!---START GALLERY--->
<div class="gallerybox">
<h2>Gallery</h2>
<p class="paragraph">View beautiful pictures of Picasso</p>
<div class="gallery">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker22.jpg" alt="Picasso1">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker38.jpg" alt="Picasso2">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker11.jpg" alt="Picasso3">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker10.jpg" alt="Picasso4">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker44.jpg" alt="Picasso5">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker07.jpg" alt="Picasso6">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker25.jpg" alt="Picasso7">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker42.jpg" alt="Picasso8">
</div>
</div>
<!---END GALLERY--->
</main>
<footer></footer>
</body>
</html>
Hi there!
Set the html and body elements to have a minimum height of 100%: This ensures that both elements can expand beyond the viewport height when content overflows.
Use background-size: cover;. This property scales the background image to cover the entire container, ensuring no gaps appear.
Hi hasanzaib1389, thank you for your reply.
The problem was already solved by
changing the body “height:100%;” to “min-height:100%;”.
"background-size:cover; "didn’t do much after I replaced the code like I said before.
Is it necessary to use it if I already solved the problem like this?
Can I ask another question related to my project? Or should I create a new topic?
If you’re doing FCC curriculum challenge’s, then create a topic to the challenge step using Help button.
If it’s working as expected, don’t touch it. 
I was looking at my code. And now I see that my title already disappeared before I asked this question.
Why did my title disappear and where?
<h1 id="title">In loving memory Picasso</h1>
body {
background-image:linear-gradient(#C8CB8B,#BCBF88, #6F7051);
width:100%;
min-height:100%;
font-family:tahoma, sans-serif;
padding:0;
margin:0 auto 0 auto;
}
#title {
text-align:center;
color:#fffec5;
}
/*START image banner*/
#img-div {
margin:0px auto;
padding:0;
width:1500px;
background-color:red;
text-align:center;
}
#image {
width:800px;
margin-top:0;
}
#img-caption p {
margin-top:0;
}
/*END image banner*/
/*START: navigation bar*/
header {
width:100%;
height:50px;
background-color:#eeec9f ;
position:fixed;
}
nav > ul{
list-style-type:none;
text-align:center;
padding:0;
font-size:35px;
/* background-color:red;*/
margin:0;
}
nav > ul > li {
display:inline;
padding:0 30px 0 30px;
/* background-color:yellow;*/
}
nav > ul > li > a{
text-decoration:none;
color:#403f0d ;
}
ul > li > a:hover {
color:#000000 ;
}
/*END: navigation bar*/
/*START MAIN*/
main {
}
#tribute-info {
width:1500px;
height:150px;
margin:0 auto;
/*background-color:blue;*/
text-align:left;
}
.paragraph {
margin:10px;
font-size:20px;
}
.gallerybox {
width:1500px;
min-height:100%;
margin:100px auto;
/*background-color:green;*/
text-align:left;
}
.gallerybox > h2 {
padding:10px;
}
.gallery {
height:750px;
width:1500px;
/*background-color:orange;*/
}
.gallery img {
width:100%;
max-width:370px;
height:370px;
object-fit:cover;
border-radius:10px;
}
/*END MAIN*/
footer {
/*background-color:blue;*/
height:50px;
width:100%;
position:relative;
bottom:0;
padding:0;
}
.footertext {
fontsize:10px;
font-family: Tahoma;
text-align:center;
padding:15px;
color:#cace76;
}
<!DCOTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="styles.css">
<title>In loving memory Picasso</title>
</head>
<body>
<!---START Navigation bar--->
<header>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Information</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
<!---END Navigation bar--->
<!---START MAIN--->
<main id="main">
<h1 id="title">In loving memory Picasso</h1>
<!---START IMAGE BANNER-->
<div id="img-div">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker32.jpg" alt="Picasso closeup" id="image">
<div id="img-caption"><p >Close up picture of Picasso</p></div>
</div>
<!--END IMAGE BANNER--->
<div id="tribute-info"><p class="paragraph">Picasso is one of my very favorite wild horses, and has been since I first met him on a fall day at the last helicopter roundup in Sand Wash Basin in 2008. It was a horrible roundup, with horses slamming into panels and 11 horses dying before it was over..<br>Now it has been a year since anyone has seen Picasso and the Grand Old Man of the Basin is believed to have gone to his final rest, in his home in Sand Wash Basin. This noble, proud, colorful and gentle stallion who lived over 30 years has been able to live his entire life wild and free – he is a symbol of the very best of our wild horses in America and I feel privileged and thankful to have been able to have met him and followed his story in the last decade of his life. His legacy lives on in his many offspring, and in the hearts of those who have loved him over the years. He will always be remembered.</p>
<p class="paragraph">Would you like to visit the source of the text I used for this exercise?<br><a href="https://www.wildhoofbeats.com/blog/a-tribute-to-picasso-iconic-wild-stallion-of-sand-wash-basin" alt="link info laika" target="_blank" id="tribute-link">Visit the original page</a></p></div>
<!---START GALLERY--->
<div class="gallerybox">
<h2>Gallery</h2>
<p class="paragraph">View beautiful pictures of Picasso</p>
<div class="gallery">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker22.jpg" alt="Picasso1">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker38.jpg" alt="Picasso2">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker11.jpg" alt="Picasso3">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker10.jpg" alt="Picasso4">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker44.jpg" alt="Picasso5">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker07.jpg" alt="Picasso6">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker25.jpg" alt="Picasso7">
<img src="https://www.wildhoofbeats.com/wp-content/uploads/2020/11/20CarolWalker42.jpg" alt="Picasso8">
</div>
</div>
<!---END GALLERY--->
</main>
<footer>
<p class="footertext"> <i>Designed by Wassenaar</i></p>
</footer>
</body>
</html>
It should be overlapped by navbar or any other element.
Can you put your code to a live editor, like codepen.io, so we can sort it better.
The window from FCC shows that the navbar is fixed to the top of the screen. In codepen, de navbar is fixed but not to the top of the screen. Why is that?
I only can see the editor view as per restrictions form your account I can’t access the full gpage view. It’s showing on top of the page and fixed .
Yeah, but within the full page view, your navbar is also fixed on the top of the page. What do you want to do with it.
The title is hiding behind the navbar.
The navbar is not totally on top of the screen…
I would like to have the navbar fixed at the top of the screen. The title should be below the navbar. When scrolling to the top, the title does not pass the navbar.
Give your header z-index property set to 1000 and top property to 0.
Give your #title a margin top property value as you need.