Cant positioning Backgroud image behind another component in react-CodePudding

i have two components in react (green(nav) and red border(banner)). Actually i setted the background image of the red bordered component, with following css:

.banner {
    margin-top: 0;
    background-image: url("../../assets/img/banner/banner- 
    bg.png");
    padding: 260px 0 100px 0;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
    border: red 2px solid;
}

Image of actual state:

I want it like this:

CodePudding user response：

you can put both banners inside a container & place bg-image on that

.banner {
  margin-top: 0;
  padding: 260px 0 100px 0;
  border: red 2px solid;
}

.nav {
  padding: 20px 0 100px 0;
  border: green 2px solid;
}

.bannerBg {
  background-image: url("https://images.unsplash.com/photo-1664142315016-89b004b66788?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80");
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
}

<section >
  <div >
  </div>
  <div >
  </div>
</section>

CodePudding user response：

I Fixed the Problem by adding following css rule to "Nav" container:

position: fixed;