background-attachmentプロパティは、スクロール時の背景画像の表示方法を指定します。
background-attachmentプロパティ
記法
.クラス名 {
background-attachment : 表示方法;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" />
<title>background-attachmentプロパティ</title>
</head>
<body>
<p>表示方法：scroll</p>
<p>要素内をスクロールしてみてください。</p>
<p>※文字だけ動く</p>
<p class="font tomoji-element background-attachment-scroll">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet architecto
voluptatum ex aperiam doloribus reprehenderit illo earum. Enim doloremque
magnam ratione sequi temporibus quo voluptates maxime at deserunt
veritatis! Fugit!
</p>
<hr />
<p>表示方法：fixed</p>
<p>画面全体をスクロールしてみてください。</p>
<p>※背景だけ動く</p>
<p class="font tomoji-element background-attachment-fixed">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet architecto
voluptatum ex aperiam doloribus reprehenderit illo earum. Enim doloremque
magnam ratione sequi temporibus quo voluptates maxime at deserunt
veritatis! Fugit!
</p>
<hr />
<p>表示方法：local</p>
<p>要素内をスクロールしてみてください。</p>
<p>※両方動く</p>
<p class="font tomoji-element background-attachment-local">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet architecto
voluptatum ex aperiam doloribus reprehenderit illo earum. Enim doloremque
magnam ratione sequi temporibus quo voluptates maxime at deserunt
veritatis! Fugit!
</p>
<hr />
</body>
</html>.font {
color: black;
font-size: 16px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff, 2px 2px 0 #000;
}
.tomoji-element {
background-image: url(画像URL.拡張子);
border: solid 1px black;
overflow: scroll;
background-position: 0;
background-size: 70px 70px;
}
.background-attachment-scroll {
height: 200px;
width: 200px;
background-attachment: scroll;
}
.background-attachment-fixed {
height: 200px;
width: 200px;
background-attachment: fixed;
}
.background-attachment-local {
height: 200px;
width: 200px;
background-attachment: local;
}出力結果
表示方法：scroll
要素内をスクロールしてみてください。
※文字だけ動く
表示方法：fixed
画面全体をスクロールしてみてください。
※背景だけ動く
表示方法：local
要素内をスクロールしてみてください。
※両方動く