I am trying to make header with background image on it. This is the url :

CodePudding user response：

I have checked your code and saw you are giving background-color to most of the div's which are inside o your div try removing those background-color then you'll see the background image.

The problem is that image is going behind my header

the problem is not with the position of background image it is on correct positiom. see in the below screenshots

https://prnt.sc/Qy0uHO3QQ_uf

https://prnt.sc/iRxVEPVNNzMM

https://prnt.sc/Y5F2rqv2NFvP

CodePudding user response：

The basic problem is that some of the child elements to bg1 have their own background color set and that is overwriting the background image.

Also the color used for those backgrounds is not the same as the dark background on the big image which more closely resembles full black.

But when the background image is positioned to the right on some screen aspect ratios there will be a gap at the left.

This snippet does several things: positions the background image to the right but also gives bg1 a background color of black so the whole bg1 element is covered. It then removes all the background colors set for the other elements.

Note that the z-index setting for bg1, at least in the context given, was meaningless as the whole thing would be within that stacking context and there is no need to add z-index to the children in this structure.

body {
  width: 100vw;
  height: 100vh;
}

.bg1 {
  width: 100%;
  height: 100%;
  background-image: url(https://aionnyc.gogroth.com/wp-content/uploads/2021/09/Microneedling-bg.jpg);
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-size: contain;
  background-position: right bottom;
  background-color: black;
}

.header {
  position: relative;
}

.nav {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 98;
  color: white;
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<div >
  <div >
    <div >
      <div >
        <div >
          <img src="https://aionnyc.gogroth.com/wp-content/uploads/2021/08/Footer-Logo.png" >
        </div>
      </div>
    </div>
  </div>
</div>