background(バックグラウンド)について
要素内の背景を設定するプロパティです。
画像の配置やカラーの設定を行うことが出来ます。
backgroundのブラウザ表示例①
- ■CSS記述
.sample1 { width:400px; height:100px; border:1px solid #ccc; }
.sample2 { background-color:#f00; }- ■XHTML記述
<div class="sample1 sample2"></div>
backgroundのブラウザ表示例②
- ■CSS記述
-
.sample1 { width:400px; height:100px; border:1px solid #ccc; }
.sample3 { background:url(../images/background-img-1.gif) left top no-repeat; } - ■XHTML記述
<div class="sample1 sample3"></div>
backgroundのブラウザ表示例③
- ■CSS記述
.sample1 { width:400px; height:100px; border:1px solid #ccc; }
.sample4 { background:url(../images/background-img-1.gif) left top repeat-x; }- ■XHTML記述
<div class="sample1 sample4"></div>
backgroundのブラウザ表示例④
- ■CSS記述
.sample1 { width:400px; height:100px; border:1px solid #ccc; }
.sample5 { background:url(../images/background-img-1.gif) left top repeat-y; }- ■XHTML記述
<div class="sample1 sample5"></div>
backgroundのブラウザ表示例⑤
- ■CSS記述
.sample1 { width:400px; height:100px; border:1px solid #ccc; }
.sample6 { background:url(../images/background-img-1.gif) center center no-repeat; }- ■XHTML記述
<div class="sample1 sample6"></div>
background(バックグラウンド)の設定方法
- 背景画像
- background-image: (値);
- 背景カラー
- background-color: (値);
- 背景画像の表示位置
- background-position: (値);
- 背景画像の繰り返し
- background-repeat: (値);
- 一括設定
- background: (背景カラー) (画像) (横位置) (縦位置) (リピートの有無);
※順番は自由です。
background(バックグラウンド)の値
- 背景画像
- url(画像パス)
(例)url(../sample.gif) - 背景カラー
- 16進数のカラーコードやカラー名
- 背景画像の表示位置
- top(上) , right(右) , botttom(下) , left(左)
- 背景画像の繰り返し
- repeat-x(横方向),repeat-y(縦方向),no-repeat(リピートしない)
