Reputation: 215
I have two two containers, a navigation bar and the hero below it. I only set background-image for the hero and I have no background-image set for the navigation bar. However, the background for the navigation bar seems to be set automatically the same as the hero.
Part of my css looks like below:
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
}
.HeroWrapper{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
position: relative;
background-image: url("images/pencil.jpg");
background-size: 100px;
}
and my html is like:
<div class = "Nav"></div>
<div class = "HeroWrapper"></div>
Upvotes: 1
Views: 320
Reputation: 1771
This is happening because of the position
values of both of your divs (fixed
and relative
).
It looks like .Nav
has a transparent background by default. If you do not want .Nav
to have this background you could simply specify another such as background: white;
.Nav {
height: 55px;
display: flex;
justify-content: space-between;
padding: 1rem 2rem;
z-index: 100;
position: fixed;
width: 100%;
opacity: 0.8;
background: white
}
Upvotes: 2