CSSプロパティ

background

 背景を設定するCSSプロパティです。以下の個別設定を一括して指定できます。

・backgroud-color

backgroud-image

backgroud-attachment

background-repeat

background-position

backgroud-color

 背景色を指定します。

backgroud-colorの書式

[書式]

background-color: [値:色コード];

backgroud-image

 背景画像を呼出し、指定します。

backgroud-imageの書式

[書式]

background-image: [値:url関数];

background-attachment

 背景画像を固定するかスクロールさせるかを指定します。

backgroud-attachmentの書式

[書式]

background-attachment: [値];

background-attachmentの値

[値]

fixed

:固定する。画面の一か所に留めます。画面全体を動かすと移動します。

scroll

:スクロールする。画面を動かしても背景は動きません。初期値です。

background-repeat

 背景画像の繰り返しを指定します。

background-repeatの書式

[書式]

background-repeat: [値];

background-repeatの値

[値]

repeat

:全体に敷き詰めて表示されます。初期値です。

表示
 
repeat-x

:x方向(水平方向)に繰り返します。

 

表示
 
repeat-y

:y方向(垂直方向)に繰り返します。

 

表示
 
no-repeat

:1つだけ表示します。繰り返しはしません。

 

表示
 

background-position

 背景画像の位置を指定します。 

background-positionの書式

[書式]

background-position: [値];

background-positionの値

[値]

数値

: x(水平)、y(垂直)の数値で位置を指定します。初期値は 0 0 (左上隅)です。

CSS
background-position: 25% 75%;
表示
 
center

 :中央に表示されます。

left      

:左端にに表示されます。

right    

:右端にに表示されます。

top      

:上端に表示されます。

bottom

:下端に表示されます。

 は組み合わせて使うことができます。

CSS
background-position: center right;
表示
 

 

CSS
background-position: bottom left;
表示
 

 

CSS
background-position: center top;
表示