'css overlapping background image with header

I am trying to make header with background image on it. This is the url :https://aionnyc.gogroth.com/specials/

Below is the URL of my implementation: https://htestclinic.devemr.growthemr.com/service/Aiomedspa

But some how for me I am not able to create it. This is what I have tried

 <div class="bg1">
        <div class="header">
            <div class="nav">
                <div class="nav-content-wrapper">
                    <div class="logo">
                        <img src="https://aionnyc.gogroth.com/wp-content/uploads/2021/08/Footer-Logo.png"
                            class="nav-logo">
                    </div>
                </div>
            </div>
        </div>
    </div>

Styles.css

.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-x: 100%;
    z-index: 99;
}
.header {
    position: relative;
    background-color: rgb(45, 41, 37);
}

.nav {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: rgb(45, 41, 37);
    z-index: 98;
}

The problem is that image is going behind my header. Below is the result. Any help will be appreciated.

enter image description here

htmlcss


Solution 1:[1]

I have checked your code and saw you are giving background-color to most of the div's which are inside o your class="bg1" 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

Solution 2:[2]

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 class="bg1">
  <div class="header">
    <div class="nav">
      <div class="nav-content-wrapper">
        <div class="logo">
          <img src="https://aionnyc.gogroth.com/wp-content/uploads/2021/08/Footer-Logo.png" class="nav-logo">
        </div>
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 SHAHIL MISHRA
Solution 2 A Haworth

Related Questions