.contentInnerとその中身を画像の上に浮かせます

filename.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="headerInner">
      <div class="headerLeft">
        <img src="./img/" alt="logo">
      </div>
      <nav>
        <ul>
          <li>
            <a href="">HOME</a>
          </li>
          <li>
            <a href="">CONTENT</a>
          </li>
          <li>
            <a href="">CONTACT</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="contentInner">
    <h2>h2_title</h2>
    <section class="top">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="top">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <div class="leftContents">
        <h3 class="h3_title">h3_title</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
        </p>
      </div>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="top">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus ea obcaecati laborum ad deleniti fugiat dolor ut, nemo recusandae illum possimus, enim soluta magnam iste at magni nam. Alias, voluptate?
      </p>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
    <section class="center reverse">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid, asperiores exercitationem! Rem alias assumenda eaque mollitia accusamus aliquid hic excepturi? Labore veniam iste neque eaque id quod adipisci vel libero.
      </p>
      <img src="./img/IMG_0671.JPG" alt="">
    </section>
  </div>

</body>
</html>

filename.css

* {
  padding: 0;
  margin: 0;
}

ol, ul {
  list-style: none;
}

a {
  cursor: pointer;
  color: black;
  text-decoration: none;
}

header {
  width: 100%;
  background: linear-gradient(#fe3, #66ff22);
  position: absolute;
  top: 0;
  z-index: 100;
}

.headerInner {
  width: 1000px;
  margin: 0 auto;
  display: flex;
}

nav {
  width: 100%;
}

nav ul {
  display: flex;
  right: 0;
}

nav ul li {
  width: 100%;
  text-align: center;
  border-right: 1px solid white;
}

nav ul li:first-child {
  border-left: 1px solid white;
}

nav ul li a {
  display: block;
  padding: 20px;
  font-weight: bold;
}

nav ul li a:hover {
  background: linear-gradient(green, aqua) ;
  transition: all 0.8s;
}

body {
  background-image: url(./img/IMG_0007.JPG),
    url(./img/IMG_0830.JPG);
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    100% 400px,
    100% 400px;
  background-position: 
    top, 0px 400px,
    center,  0px 300px;
}

.contentInner {
  width: 1000px;
  margin: 130px auto;
  background-color: azure;
  height: 100%;
  padding: 30px 0;
  border-radius: 20px;
}

.contentInner>section {
  width: 900px;
  margin: 30px auto;
  background-color: palegreen;
  display: flex;
}

.reverse {
  flex-direction: row-reverse;
}

img {
  width: 40%;
}
.leftContents {
  padding: 30px;
}

h2, h3 {
  text-align: center;
}

【CSS】背景に画像を複数設置し、その「上」にコンテンツを載せる

.contentInnerとその中身を画像の上に浮かせます