backgroundプロパティ

スポンサードリンク

backgroundプロパティ

背景に関係するスタイルをまとめて指定できます
背景の色、背景画像、背景画像の位置、背景画像の固定、背景画像の繰り返しなどの値をまとめて指定できます
値を複数並べる場合、半角スペースで区切ります
値を並べる順序はありません
どの値も省略できます

使い方（書式）

セレクタ { background: 値; }

backgroundプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	しない

プロパティの値	説明
background-colorの値	背景色の値を使えます
background-imageの値	背景画像の値url(url)を使えます
background-repeatの値	背景画像の繰り返しの値を使えます
background-positionの値	背景画像位置の値を使えます
background-attachmentの値	背景画像の固定、スクロール

実際の指定方法

背景の色、背景画像、背景画像の位置、背景画像の繰り返しを指定

.hoge { 
 background:lemonchiffon url(maru.gif) left top repeat-x;/* 背景スタイルをまとめて指定 */
 height: 150px;                                  /* 要素の高さ */
 border: 1px solid #000;                         /* わかりやすいように枠線をつけました */
 }

背景画像、背景画像の位置、背景画像の繰り返し、背景画像の固定を指定

.hoge2 { 
 background:url(maru.gif) left top repeat-y fixed;    /* 背景画像の固定のスタイル */
 }

html部分

<div class="hoge">hogeクラス</div>

<body class="hoge2">

実際の表示

hogeクラス

hoge2クラスはページの左に表示しています。値はfixed