HTML DOMのbackgroundAttachmentプロパティとは？構文・値・使い方を徹底解説
backgroundAttachmentプロパティとは
backgroundAttachmentプロパティは、背景画像をページのコンテンツに合わせてスクロールさせるかどうかを設定・取得するために使用されるプロパティです。Webページをスクロールした際に背景画像を固定して表示したい場合や、逆にコンテンツと一緒に背景を動かしたい場合など、背景画像のスクロール挙動を柔軟に制御できます。
構文（シンタックス）
backgroundAttachmentプロパティを設定する場合の構文は以下の通りです。
object.style.backgroundAttachment = "scroll|fixed|local|initial|inherit"
指定できる値
backgroundAttachmentプロパティには以下の値を指定できます。
| 番号 | 値と説明 |
|---|---|
| 1 | scroll デフォルト値。背景画像がページ（要素）とともにスクロールします。 |
| 2 | fixed 背景画像がビューポートに対して固定されます。ページをスクロールしても背景は動きません。 |
| 3 | local 要素の内容とともに背景画像がスクロールします。 |
| 4 | initial このプロパティを初期値に設定します。 |
| 5 | inherit 親要素のプロパティ値を継承します。 |
サンプルコード
それでは、backgroundAttachmentプロパティの具体的な使用例を見ていきましょう。ボタンをクリックすることで、背景画像の固定状態を「fixed」から「local」へ動的に変更する例です。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("https://www.tutorialspoint.com/artificial_intelligence_with_python/images/artificialintelligence-with-python-mini-logo.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
}
article {
color: white;
background: rgba(0, 0, 0, 0.4);
}
</style>
<script>
function changeAttachment(){
document.getElementById("BODY1").style.backgroundAttachment="local";
document.getElementById("Sample").innerHTML="背景がページと一緒にスクロールするようになりました。";
}
</script>
</head>
<body id="BODY1">
<h2>This is demo heading</h2>
<p>Curabitur tincidunt elit libero, sed ullamcorper urna ullamcorper ut.
Nulla scelerisque, quam in efficitur porta, nisi turpis blandit odio, vitae ultricies lectus ex vel felis.
Proin lectus nulla, cursus vitae massa ac, mollis gravida orci. Cras euismod imperdiet elit, aliquet placerat purus bibendum vel.
Nullam vehicula urna non ullamcorper congue. Etiam volutpat gravida tempus. Fusce non volutpat diam.
Nullam sagittis condimentum dui, a pharetra mi commodo nec. Cras vulputate hendrerit ornare.
Sed id ligula sit amet arcu dapibus molestie nec at risus.
Aliquam gravida, dolor non vehicula lobortis, augue erat gravida metus, id eleifend ante risus vel turpis.
Nunc fermentum scelerisque nulla, non gravida dui consequat malesuada. Pellentesque mollis scelerisque quam ac efficitur.
Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<p> Vivamus eget nisi eu libero viverra vestibulum. Nulla luctus ultrices metus, nec dapibus magna dignissim eget. Ut sed posuere erat.</p>
<p>Nunc ante velit, efficitur vitae dignissim semper, maximus in mi.</p>
<p>Pellentesque vitae est eget est tempus pretium.
Phasellus semper erat efficitur justo tristique sollicitudin.
Morbi mi eros, aliquet ac gravida ac, tempor et ante. </p>
<p>Aenean non justo non lorem accumsan fermentum efficitur at quam.
Morbi rhoncus lacus sed est luctus, a hendrerit est ullamcorper.
Etiam quis nisl non sem fringilla ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Donec ac malesuada turpis. Donec dapibus diam metus, nec blandit tellus vulputate quis.</p>
<p>Donec blandit tincidunt ante, sed blandit massa volutpat eu. Mauris ac porta lectus, et vulputate ante.</p>
<p>下のボタンをクリックして、背景画像のattachmentの値を変更してみましょう。</p>
<button onclick="changeAttachment()">CHANGE ATTACHMENT</button>
<p id="Sample"></p>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
初期状態では「background-attachment: fixed」が指定されているため、ページをスクロールしても背景画像は上部に固定されたまま表示されます。「CHANGE ATTACHMENT」ボタンをクリックすると、値が「local」に切り替わり、背景画像がコンテンツと一緒にスクロールするようになります。
まとめ
backgroundAttachmentプロパティを使うことで、背景画像のスクロール挙動を簡単に制御できます。特に「fixed」を指定すれば、スクロールしても動かない視覚的に魅力的な背景演出が可能になります。CSSでも同じように利用できるため、ぜひ実際のWebサイト制作でも活用してみてください。
-
HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説
HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる
-
HTML DOM スタイルの quotes プロパティの使い方を徹底解説
HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri