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

Floral Damask patterns. Vector seamless set of flowery tracery and flourish ornate adornment of royal luxury ornamental flowers and vintage baroque motif ornaments for interior decor design tiles and backdrops

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

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background】1 ~ 背景プロパティの種類とbackground-color
CSS【 background】2 ~ background-imageでレイヤーやグラデーションも

目次

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>

▲目次へ戻る

コメントを残す

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