背景 background

background-color : 色 ;

例）body { background-color : red ; }

背景色を指定します。

青文字には

【カラーネーム】red　などと英語で記入

【カラーコード】#ff0000　などと#で始まる6桁の英数字、0～fの16進数

【RGB】rgb(255,0,0)　などと各3桁でRGB値を指定、0～255の10進数

【RGB】rgb(100%,0,0)　などと％でRGB値を指定

と、色々色指定の仕方はありますが、背景色の色を入れ、指定します。

background-color : red ;

background-image : url(画像url) ;

例）body { background-image : url(http://blog.ameba.jp/user_images/28/ab/10003127214.png ) ;}

背景画像を指定します。

青字には、画像ＵＲＬを入れます。

↑シャボン玉画像のＵＲＬ

http://blog.ameba.jp/user_images/28/ab/10003127214.png

background-image : url(http://blog.ameba.jp/
user_images/28/ab/
10003127214.png) ;

background-repeat

例）body {

background-image : url(http://blog.ameba.jp/user_images/28/ab/10003127214.png ) ;

background-repeat : repeat ;

}

背景画像をどのようにならべるか指定します。

青字には

【敷き詰める】repeat　指定しない場合

【一つだけ表示】no-repeat

【横一列に並べる】repeat-x

【縦一列に並べる】repeat-y

を入れます。

no-repeat

repeat-x

repeat-y

background-position

例）body {

background-image : url(http://blog.ameba.jp/user_images/28/ab/10003127214.png ) ;

background-repeat : no-repeat ;

background-position : left top ;

}

背景画像を一つだけ表示させる場合の位置を指定します。

青字には

【横方向、縦方向】left / center / right 、top / center / bottom 、で指定

【左から、上から】50px 100px や 20% 30% で指定

left top

left center

left bottom

center top

center center

center bottom

right top

right center

right bottom

50px 20px

70% 10%

background-attachment : fixed ;

例）body {

background-image : url(http://blog.ameba.jp/user_images/28/ab/10003127214.png ) ;

background-repeat : repeat-y ;

background-position : right ;

background-attachment : fixed ;

}

背景画像をスクロールさせない。

スクロールしても画像はスクロールしない。

スクロールしても画像はスクロールしない。

スクロールしても画像はスクロールしない。

スクロールしても画像はスクロールしない。

スクロールしても画像はスクロールしない。

background

例）body {background : #ff0000 url(http://blog.ameba.jp/user_images/28/ab/10003127214.png ) repeat-y fixed right ; }

一変に背景を指定。

---

関連記事

■color　文字の色・境界線の色