無料ホームページ作成!CSS・スタイルシート
背景の一括指定

無料ホームページ作成!CSS・背景
背景の一括指定

ホームページの背景の一括指定

background属性

このbackground属性は背景の色、背景画像、背景画像の固定、背景画像の繰り返し、背景画像の表示位置を一括で指定できる属性です。
並び方には特にルールはなく、指定しなくてもいい背景系の値は省略できます、省略されたものは初期値で設定されます。背景色と背景画像は画像が優先され、画像を表示できない場合、背景色が適用されます。
必ず属性値の間には半角スペースを入れて分けることも重要。
背景系の属性を覚えてしまえば背景系はこの属性を指定するだけでいいでしょう。

background属性の使い方

CSSソース

セレクタ{
	background:#ffffff url(gazou.gif) fixed no-repeat 70% 60%;
}
 
結果

bodyセレクタ指定されています、background-position属性と同じ値だが一行で宣言できてしまう。

background属性で宣言できる値

概要
#RGB #000000等の16進数で2桁ずつ宣言し、細かく設定できる
#RRGGBB #000000等の16進数で1桁ずつ宣言し、設定できる
rgb(R,G,B) 色を10進数で指定する
rgb(R%,G%,B%) 色を%で指定する、この場合は文字を赤色にする
red 色名で指定する、この場合は文字を赤色にする
transparent 背景を透明にする(初期値)
画像
概要
url(gazou.gif) ()内を絶対パスか相対パスで背景画像を指定
none 背景画像を指定しない
固定※1
概要
fixed 背景画像を固定する
scroll 背景画像を固定しない
繰り返し
概要
repeat 背景画像を縦、横に繰り返す
repeat-x 背景画像を横に繰り返す
repeat-y 背景画像を縦に繰り返す
no-repeat 背景画像を繰り返さない
表示位置※1
概要
% 左からの位置と上からの位置を%で指定
px 左からの位置と上からの位置をピクセルで指定
center 背景画像を中央に置く
top 背景画像を上に置く
right 背景画像を右に置く
bottom 背景画像を下に置く
left 背景画像を左に置く

※1:NNでは対応していません。

値の使用例

何行も書き込む必要がないため非常に便利です。

無料ホームページ作成!メニュー

CSS・スタイルシート

基本

文字

余白

背景

ボックス

配置

リスト

リンクについてお問い合わせ
無料ホームページ作成!HTML&CSS