background-attachment

background-attachmentプロパティとは

background-attachmentプロパティを使うと、ビューポート上に背景画像を固定させたり、スクロールさせたりすることができます。

background-attachmentの定義は、以下のとおりです。

background-imageで複数画像を指定していた場合は、カンマ(,)で区切って複数指定できます。

値の説明

以下は、background-attachmentで使える値と説明です。

scroll

要素自体がスクロールすると、背景画像もスクロールします。要素の固定位置に表示されるため、コンテンツのスクロールでは背景画像がスクロールしません。

fixed

ビューポートの固定位置で表示されます。つまり、コンテンツのスクロールでも、要素のスクロールでも、背景画像はスクロールしません。

local

コンテンツの固定位置で表示されます。つまり、コンテンツがスクロールしても、要素がスクロール(コンテンツもスクロールする)しても、背景画像はスクロールします。

利用例

background-attachmentの利用例は、以下のとおりです。

.test1 {
  height:150px;
  width: 250px;
  overflow: scroll;
}
  
.test2 {
  height: 170px;
  width: 220px;
  overflow: scroll;
  background-image: url("../images/image1.png");
  background-attachment: scroll;
}

HTMLは、以下とします。

<div class="test1">
<div class="test2">
<p>1行目</p>
<p>2行目</p>
<p>3行目</p>
<p>4行目</p>
<p>5行目</p>
</div>
</div>

上記は、以下のように表示されます。

内側のスクロールバーでスクロールしても、背景画像はスクロールしません。要素の固定位置に表示されるためです。外側のスクロールバーでスクロールすると、背景画像はスクロールします。要素がスクロールすると、背景画像もスクロールするためです。

※スマホで見るとスクロールバーが表示されないかもしれませんが、内側は背景画像の上で上下に動かせば現れます。外側のスクロールバーは、背景画像のすぐ右で上下に動かせば現れます。

次は、fixedの時の表示例です。

内側のスクロールバーでスクロールしても、外側のスクロールバーでスクロールしても、背景画像はスクロールされません。ビューポートに固定されています。

これは、このページ自体をスクロールした時も背景画像がスクロールされませんが、見え方は背景画像の方がスクロールしているように見えてしまうと思います。

次は、localの時の表示例です。

内側のスクロールバーでスクロールしても、外側のスクロールバーでスクロールしても、背景画像がスクロールされます。コンテンツの表示位置と一体なので、コンテンツがスクロールすると、背景画像もスクロールするためです。

body要素に適用すると、scrollとlocalはページのスクロールに合わせて背景画像がスクロールします。fixedを指定すると、背景画像がビューポートに固定します。

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

〇

サポート

△

制限あり

×

未サポート

？

不明

IE

Internet Explorer

Ed

Edge

Fx

Firefox

Ch

Chrome

Sa

Safari

Op

Opera

An

Android Browser

Sm

Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。