デザイナーが作った背景等をmainにインサートする方法 - Kazuma-work

実装の解説

html

<body>
    <header id="header">
      <div class="header_inner">
        <div class="header_logo">
          <a href="index.html"
            ><img src="img/test_logo.svg" alt="ロゴ画像"
          /></a>
        </div>
        <nav class="header_nav pc-only">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="test1.html">Test1</a></li>
            <li><a href="test2.html">Test2</a></li>
            <li><a href="test3.html">Test3</a></li>
          </ul>
          <div class="header_btn">
            <a href="#" class="btn_basic">お問い合わせ</a>
          </div>
        </nav>
      </div>
    </header>

    <div class="main_visual">
      <picture>
        <source media="(max-width: 768px)" srcset="img/mv_sp.png" />
        <source media="(max-width: 1440px)" srcset="img/mv1.png" />
        <img src="img/mv1.png" alt="メインビジュアル" loading="lazy" />
      </picture>
    </div>

    <main id="main">
      <section class="section_test_one">
        
      </section>
    </main>

    <footer>
      <div class="footer_inner"></div>
    </footer>
    <!-- JavaScriptファイルの読み込み -->
  </body>



ｃｓｓ

#main {
  background-image: url("../img/back1.png");
  background-size: auto;
  background-position: top center;
  background-repeat: repeat;
}

/*---------------section_test_oneのスタイル---------------*/
.section_test_one {
  background-color: transparent; /* 背景を透明にしてmainの背景を表示 */
  padding-inline: min(3.47vw, 50px);
  padding-block: min(6.94vw, 100px);
}



重要なポイント

background-repeat: repeat - 画像をタイル状に繰り返す
background-size: auto - 元の解像度を維持
section側をtransparent - 背景を透過させて#mainの背景を表示



HTML構造の改善

MVを<main>の外に移動 → セクションごとの背景管理が容易に
階層構造が明確になった

以下が実装内容です。黒の背景テクスチャです