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

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

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

1. background-repeatプロパティ

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

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

　
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;

▲目次へ戻る

2. background-attachmentプロパティ

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

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

　
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（下段）は、背景の画像もテキストと一緒に動きます。

▲目次へ戻る