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

colmun_main4477

背景に関するプロパティの中に、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プロパティ
2.background-attachmentプロパティ

1.background-repeatプロパティ

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

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

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

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

Seamless pattern illustration inspired by Portuguese tiles
上の画像を色んな方法でリピートさせてみると、次のようになります。

リピートなし

横にリピート

縦にリピート

縦横にリピート

 
ソースは次の通りです。

(CSS)
div#sample {margin:0;}
div#sample p {margin:1em 0; padding:2em; color:#FFF; background-color:#09C;
background-image:url(http://www.recipi.jp/recipi/wp-content/uploads/2017/04/colmun_image4477_01.jpg);}
div#sample p:nth-child(1) {background-repeat: no-repeat;}
div#sample p:nth-child(2) {background-repeat: repeat-x;}
div#sample p:nth-child(3) {background-repeat: repeat-y;}
div#sample p:nth-child(4) {background-repeat: repeat;}

(HTML)
<div id=”sample”>
<p>リピートなし</p>
<p>横にリピート</p>
<p>縦にリピート</p>
<p>縦横にリピート</p>
</div>

また、background-repeatプロパティの値として、CSS3から新しくspaceroundが加わりました。
spaceは、領域内にちょうど収まるようにスペースを空けて調整され、roundは、領域内にちょうど収まるようにサイズが調整されます。

space

round

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

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

▲目次へ戻る

2.background-attachmentプロパティ

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

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

scroll デフォルト値
背景画像を一緒にスクロールさせる
background-attachmentを指定していない場合は、背景画像も一緒にスクロールします
fixed 背景画像はそのままの位置で固定
local 子要素に指定すると背景画像がテキストと一緒にスクロールする

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

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

スクロール

固定

ローカル

ページ全体をスクロールしてみると、fixed(中)は、テキストだけが動いて、背景画像はウィンドウに固定されています。
scroll(上)とlocal(下)は、他の要素と同じようにテキストも背景画像も一緒に動きます。

各スクロールバーをそれぞれ動かしてみると、fixed(中)は、背景画像が固定されていてテキストのみが動きます。
scroll(上)も、背景画像が固定されてテキストのみが動きます。これはscrollが子要素のときに起こる現象です。子要素にscrollを指定するとfixedのような動きになります。
local(下)は、子要素に指定すると、背景画像がテキストと一緒にスクロールします。
 
ソースは次の通りです。

(CSS)
div#sample {margin:0;}
div#sample p {margin:1em 0; padding:2em; height:1.8em; color:#FFF; background-color:#09C;
overflow-y:scroll;
background-image:url(http://www.recipi.jp/recipi/wp-content/uploads/2017/04/colmun_image4477_01.jpg);}
div#sample p:nth-child(1) {background-attachment:scroll;}
div#sample p:nth-child(2) {background-attachment:fixed;}
div#sample p:nth-child(3) {background-attachment:local;}

(HTML)
<div id=”sample”>
<p>リピートなし</p>
<p>横にリピート</p>
<p>縦にリピート</p>
<p>縦横にリピート</p>
</div>

▲目次へ戻る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です