Body background image goes behind sections background color-CodePudding

I have a problem with my background body image. When I put a color on my different sections, the background image disapear I suppose behind the color and I don't know why.

If I put a background-color on the body it works but I want a different color on each section of my page.

Here is the wireframe : [Wireframe][1] And for now I have this : [Project][2]

Here is a part of the code.

function myFunction(tag) {
  $("#cssmenu a.active").removeClass("active"); //remove previous li active class
  $(tag).closest("a").addClass("active");
}

    html, body {
    height: 100%;
    margin: 0; 
}
body {
  background-image: url("https://montaigne-energie.fr/wp-content/uploads/2022/11/phare_blan3.svg");
  background-position: 50% 2%;
  background-repeat: no-repeat;
  background-size: 140% auto;
  background-attachment: local;
}

#home {
  background-color: rgba(182, 166, 128, 0.8);
  height: 100%;
}

#services {
  background-color: rgb(33, 59, 82,.8);
  height: 100%;
}

#valeurs {
background-color: rgba(182, 166, 128, 0.8);
height: 100%;

}

#missions {
  background-color: rgb(33, 59, 82,.8);
  height: 100%;
}

#section5 {
  background-color: rgba(182, 166, 128, 0.8);
  height: 100%;
}

#footer {
  background-color: rgb(33, 59, 82,.8);
  height: 100%;
}

.section{
min-height: 100%;
}

nav {
  position: fixed;
  top: 35%;
  right: 2%;
  bottom: auto;
  z-index: 10;
}

.lader ul {
  list-style: none;
  padding: 0;
}

.lader li {
  padding: 15px 0;
}

.lader span {
  display: inline-block;
  position: relative;
}

.circle {
  height: 13px;
  width: 13px;
  left: 0;
  border-radius: 50%;
  border: 2px solid white;
  background-color: none;
}

.lader a.active span {
  background-color: white;
}

nav a:hover span {
  background-color: #fff;
  transition: 300ms;
}

<div  id="home">
 

<nav  id="cssmenu">
      <ul>
        <li>
          <a href="#home"  onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
        <li>
          <a href="#services" onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
        <li>
          <a href="#valeurs" onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
        <li>
          <a href="#missions" onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
        <li>
          <a href="#section5" onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
        <li>
          <a href="#footer" onclick="myFunction(this)">
            <span ></span>
          </a>
        </li>
      </ul>
    </nav>
</div>
<div  id="services"></div>
<div  id="valeurs"></div>
<div  id="missions"></div>
<div  id="sections5"></div>
<div  id="footer"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

Try someting like background-color: rgba(21, 45, 52, 0.3).Replace all your background color into this.

This will make your div background color has an alpha, so may be you can see the background image from the body element.

CodePudding user response：

You can't see the color because there isn't any content in your div. You can add something to your div or just add the code below to your CSS

div{
    min-height: 100px;
}