CSS【 background 】３ ～ background-repeat、background-attachment

背景に関するプロパティの中に、background-repeatプロパティとbackground-attachmentプロパティがあります。
今回は、このbackground-repeatプロパティとbackground-attachmentプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】１ ～ 背景プロパティの種類とbackground-color
CSS【 background 】２ ～ background-imageでレイヤーやグラデーションも
CSS【 background 】３ ～ background-repeat、background-attachment（本ページ）
CSS【 background 】４ ～ background-position
CSS【 background 】５ ～ background-size
CSS【 background 】６ ～ background-clip、background-origin
CSS【 background 】７ ～ 背景に関するショートハンドプロパティ

目次

１．background-repeatプロパティ
２．background-attachmentプロパティ

１．background-repeatプロパティ

background-repeatプロパティは、背景に画像をリピート表示させる際に、画像のリピート方法を指定するプロパティです。

background-repeatプロパティで指定する値には、次のようなものがあります。

repeat	デフォルト値 縦横（x軸、y軸とも）にリピートする background-repeatを指定していない場合は、画像は横方向・縦方向ともにリピートします
repeat-x	x方向（横）にだけリピートする
repeat-y	y方向（縦）にだけリピートする
no-repeat	リピートはせず、画像を１回だけ表示する
space	領域内に収まるようにスペースを使って調整しながら、縦横（x軸、y軸とも）にリピートする
round	領域内に収まるように画像のサイズを調整しながら、縦横（x軸、y軸とも）にリピートする

background-repeatプロパティの値は、継承されません。
また、background-repeatプロパティは、全ての要素で使用できます。

background-repeatプロパティにそれぞれ値を指定して 上の画像をリピートさせてみると、次のようになります。

ソースは次の通りです。

<!-- CSSファイル -->

div#d1 p {height:90px; color:white;
          background-color:mediumpurple;
          background-image:url(https://programmercollege.jp/wp/wp-content/uploads/2017/04/colmun_image4477_01.jpg);}
div#d1 p#p1 {background-repeat: no-repeat;}
div#d1 p#p2 {background-repeat: repeat-x;}
div#d1 p#p3 {background-repeat: repeat-y;}
div#d1 p#p4 {background-repeat: repeat;)}

<!-- HTMLファイル -->

<div id="d1">
  <p id="p1">リピートなし</p>
  <p id="p2">横にリピート</p>
  <p id="p3">縦にリピート</p>
  <p id="p4">縦横にリピート</p>
</div>

　
background-repeatプロパティの値として、他に space と round もあります。

どちらも 表示領域に画像の収まりが良くなるように自動調整をする値ですが、spaceは スペースを空けることで自動調整を行い、roundは 画像サイズ自体を伸縮することで自動調整を行います。

　
CSSソースのリピート指定箇所は次の通りです。

background-repeat: space;
background-repeat: round;

▲目次へ戻る

２．background-attachmentプロパティ

background-attachmentプロパティは、画面をスクロールする際に 背景の画像も一緒にスクロールさせるかどうかを指定するプロパティです。

background-attachmentプロパティで指定する値には、次のようなものがあります。

scroll	デフォルト値 背景の画像も一緒にスクロールさせる
fixed	背景の画像はスクロールさせない
local	自身の要素内ではスクロールさせないが、親要素をスクロールする際には自身の要素内のテキスト等と共に背景の画像もスクロールさせる

background-attachmentプロパティの値は、継承されません。
また、background-attachmentプロパティは、全ての要素で使用できます。

先ほどの背景画像に スクロール時の動きを指定すると、次のような表示になります。

ソースは次の通りです。

<!-- CSSファイル -->

div#d2 p {padding:50px;
          height:30px;
          color:white; 
          overflow-y:scroll;
          background-image:url(https://programmercollege.jp/wp/wp-content/uploads/2017/04/colmun_image4477_01.jpg);}
div#d2 p#p2_1 {background-attachment:scroll;}
div#d2 p#p2_2 {background-attachment:fixed;}
div#d2 p#p2_3 {background-attachment:local;}

<!-- HTMLファイル -->

<div id="d2">
  <p id="p2_1">scroll</p>
  <p id="p2_2">fixed</p>
  <p id="p2_3">local</p>
</div>

それぞれスクロールしてみると、background-attachment を local に指定した下段のスクロールは、親要素が存在するため、背景画像が「 local 」というテキストと一緒にスクロールします。

background-attachment を fixed に指定した中段のスクロールは、背景の画像が動かずに「 fixed 」というテキストのみがスクロールします。

background-attachment を scroll に指定した上段のスクロールも、背景の画像が動かずに fixed 指定の中段と同じような動きをしますが、これは scroll 指定をした HTML 要素に親要素が存在する場合にこのような動きになります。
背景の画像を確実にスクロールさせたい場合は local 指定が無難です。
　
また、ページ自体をスクロールしてみると、fixed（中段）は、背景の画像が固定されたまま「 fixed 」というテキストだけが動きます。
scroll（上段）とlocal（下段）は、背景の画像もテキストと一緒に動きます。

▲目次へ戻る