CODEWITHSUNDEEP
htmlcss
penny
penny

Reputation: 215

Background image overflows to the container above

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>

Upvotes: 1

Views: 320

Answers (1)

robbieAreBest
robbieAreBest

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

Related Questions