I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div >
<!-- Content: logo nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Team</a>
</li>
</ul>
</nav>
</div>
</header>
<div >
<!-- Mission Statement -->
<div >
<div >
<h1 >We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div >
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div >
<div >
<div >
<div >
<img src="./images/startup-square.jpg">
</div>
<div >
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div >
<div >
<div >
<img src="./images/metaverse.jpeg">
</div>
<div >
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div >
<div >
<h1> hi </h1>
</div>
<div >
<div >
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>CodePudding user response：
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div >
<!-- Content: logo nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Products</a>
</li>
<li>
<a href="#">Team</a>
</li>
</ul>
</nav>
</div>
</header>
<div >
<!-- Mission Statement -->
<div >
<div >
<h1 >We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div >
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div >
<div >
<div >
<div >
<img src="./images/startup-square.jpg">
</div>
<div >
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div >
<div >
<div >
<img src="./images/metaverse.jpeg">
</div>
<div >
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div >
<div >
<h1> hi </h1>
</div>
<div >
<div >
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>Reference from w3schools.
CodePudding user response：
I think it is very important to add to @Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as @Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.