아무래도 7note입니다. 고정 배경 이미지를 만드는 방법

고정 배경을 작성하는 방법

<div class="box">
  <p>サンプルテ 〜省略〜 サンプルテキスト</p>
  <img src="photo01.jpg" alt="">
  <p>サンプルテ 〜省略〜 サンプルテキスト</p>
  <img src="photo01.jpg" alt="">
</div>

.box {
  background: url(sample.jpg) no-repeat; /* 背景画像を指定、繰り返し禁止 */
  background-attachment: fixed; /* 背景画像をスクロールしても固定させる */
  background-size: cover; /* 背景画像を要素全体を覆うように拡大縮小させる */
}

p {
  background: rgba(255,255,255,0.5); /* 半透明の白い背景を設定 */
  padding: 20px;  /* 適当な余白を指定 */
}

img {
  width: 100%; /* 画像幅を100%に指定 */
}

요약

소마츠!