background/背景全般

backgroundプロパティを使うと背景色、画像、繰り返し、位置や固定等の設定を一括で指定出来ます。

説明

 背景の設定は個別に以下の設定が可能ですが、backgroundはこれらの設定を一括で行えます。

・background-color
背景色
・background-image
背景画像
・background-repeat
背景画像繰り返し方法
・background-position
背景画像の表示位置
・background-attachment
背景画像の固定

構文

 backgroundプロパティの構文は以下の通りです。

background: 背景色 背景画像 繰り返し方法 位置 固定orスクロール;

 背景色はred等の英語、rgb(100,50,10)等のRGB指定、#333366や#336等の16進数指定が出来ます。

 背景画像はulr(ファイル名、又はURL)で記述し、例えばurl(test.png)やurl(http://example.com/test.png)等と指定します。

 繰り返し方法は以下の4つから指定出来ます。

【繰り返し方法】
設定 動作
repeat 必要な高さ、横幅分繰り返します。デフォルトです。
no-repeat 1回だけ表示し、繰り返しません。
repeat-x 必要な横幅分繰り返し、縦には繰り返しません。
repeat-y 必要な高さ分繰り返し、横には繰り返しません。

 横位置は以下の指定が可能です。

【横位置の指定】
指定 動作
left 左寄せします。デフォルトです。
center 左右中央にセンタリングします。
right 右寄せします。
px 左からのピクセルを50px等指定します。
% 左からの位置を50%等割合で指定します。

 位置は横、縦の順で、例えばright top等とスペースで区切って指定します。

 縦位置は以下の指定が可能です。

【横位置の指定】
指定 動作
top 上寄せします。デフォルトです。
center 上下中央にセンタリングします。
bottom 下寄せします。デフォルトです。
px 上からのピクセルを50px等指定します。
% 上からの位置を50%等割合で指定します。

 デフォルトはleft topなので、背景画像は左上に表示されます。

 固定orスクロールではfixedでディスプレイに対して画像がスクロールしないように出来ます。デフォルトはscrollでディスプレイに対してスクロールします。

利用例

 backgroundの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。又、分かり易さのため高さをheightで100pxに指定しています。

div {
background: yellow url(test.png) no-repeat bottom center scroll;
height: 100px;
}

<div>本文</div>

 上記は背景色を黄色、背景画像をtest.png、繰り返しをせず、背景画像は左右中央の下でディスプレイに対してスクロールする設定にしています。

 上記を表示すると以下になります。

本文

 もう1つ例を示します。

div {
background: yellow url(test.png) repeat fixed;
height: 100px;
}

<div>本文</div>

 上記は背景色を黄色、背景画像をtest.png、繰り返して表示、位置は省略し、ディスプレイに対して固定する設定にしています。

 上記を表示すると以下になります。

本文

関連ページ

・ホームページ作成「ボックスのまとめ

 背景だけでなく、余白、幅、枠や回り込み等、ボックスの見た目や位置を変える方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)