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

스크롤해도 움직이지 않는 고정 배경 이미지를 설정하는 방법을 설명합니다.

고정 배경을 작성하는 방법

index.html

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

style.css

.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%に指定 */
}

요약

「1행으로 간단 지정」＆「자유롭게 다른 장식과 조합이 가능」인 점이 포인트군요.
어렵지 않고 쉽게 설정할 수 있습니다.

일시적으로 잘 보였지만 최근에는 이것을 사용하고 있는 사이트는 줄어든 것 같아요.
반대로 동영상 뭔가가 늘고있는 느낌이 있네요. 계측한 것은 아니기 때문에 실제로는 별로 모릅니다만.

소마츠!

~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임