【CSS】background-attachment - 背景画像のスクロール位置

CSSのbackground-attachmentプロパティについて解説します。

検証環境

CSS

macOS

14.1

background-attachment

background-attachmentは“背景画像のスクロール位置”のプロパティです。

基本構文

background-attachment: 値;

値

代表的な値は次の通りです。

値	意味
scroll	コンテンツのスクロール時に位置を固定します。
fixed	コンテンツまたはページのスクロール時に位置を固定します。
local	画像はコンテンツ内に固定され、スクロールに伴って移動します。

サンプル

scroll

sample.html

<style>
.sample {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    overflow-y: scroll;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-attachment/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    background-position: 15px 15px;
    ___ih_hl_start
    background-attachment: scroll;
    ___ih_hl_end
}
.box {
    width: 200px;
    height: 1000px;
    background-color: lightgray;
}

</style>

<div class="sample">
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
</div>
<div class="box"></div>

プレビュー

fixed

sample.html

<style>
.sample {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    overflow-y: scroll;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-attachment/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    background-position: 15px 15px;
    ___ih_hl_start
    background-attachment: fixed;
    ___ih_hl_end
}
.box {
    width: 200px;
    height: 1000px;
    background-color: lightgray;
}

</style>

<div class="sample">
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
</div>
<div class="box"></div>

プレビュー

local

sample.html

<style>
.sample {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    overflow-y: scroll;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-attachment/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    background-position: 15px 15px;
    ___ih_hl_start
    background-attachment: local;
    ___ih_hl_end
}
.box {
    width: 200px;
    height: 1000px;
    background-color: lightgray;
}

</style>

<div class="sample">
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
    CSS : Cascading Style Sheets.CSS is a programming language that decorates elements such as HTML and XML.You can set various properties such as text color, background, and size.
</div>
<div class="box"></div>

プレビュー