Background image overflows to the container above

user_11860838 0
Viewed 51

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.enter image description here

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>
css html
1 Answers

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
  }
user_15880800
Related