CSS - background

概要

属性名	border
値	[ <bg>,]* <final-bg>*
値の詳細	<bg> = <image> \|\| <position> [/ <size>]? \|\| <repeat> \|\| <attachment> \|\| <origin> \|\| <clip> <final-bg> = <bg> \|\| <color>
初期値	個々の属性値を参照
適用可能要素	すべて
継承	継承しない
メディア	visual
アニメーション	個々の属性値を参照

サポート (説明)

	CSS	IE/Edge	Firefox	Chrome	Opera	Safari
基本	CSS1	3.0	1.0	1.0	3.5	1.0
<image> <color>	CSS1	3.0	1.0	1.0	3.5	1.0
<position> <repeat> <attachment>	CSS1	4.0	1.0	1.0	3.5	1.0
複数背景	CSS3	9.0	3.6	1.0	10.5	1.3
<size>	CSS3	9.0	18	21	21	5.1
<origin> <clip>	CSS3	9.0	22	31	21	5.1

説明

背景色や背景画像をまとめて指定します。<image>, <position>, <size>, <repeat>, <attachment>, <origin>, <clip>, <color> は順不同でひとつ以上指定します。<size> を指定する場合は / で区切ってください。CSS3 以降では、カンマ(,)を用いて、複数の背景画像に対する設定を行うことができます。複数指定の場合、<color> による背景色指定は、一番最後のグループでのみ使用可能です。

値	説明
<image>	背景画像を指定します。詳細は background-image を参照してください。
<position>	背景画像の位置を指定します。詳細は background-position を参照してください。
<size>	背景画像のサイズを指定します。詳細は background-size を参照してください。<position> の後にスラッシュ(/)をつけて記述します。
<repeat>	背景画像の繰り返しを指定します。詳細は background-repeat を参照してください。
<attachment>	背景画像の貼り付け方法を指定します。詳細は background-attachment を参照してください。
<origin>	背景画像表示の基準位置を指定します。詳細は background-origin を参照してください。
<clip>	背景画像の表示領域を指定します。詳細は background-clip を参照してください。省略時は <origin> と同じ値が設定されます。
<color>	背景色を指定します。詳細は background-color を参照してください。

使用例

CSS

.sample-simple {
  background: #cc9999 url(image/back.gif) no-repeat 50% 50%;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  margin-left: 1em;
}
.sample-multiple {
  background:
    url(image/back.gif) no-repeat top right,
    url(image/back.gif) no-repeat top left,
    url(image/back.gif) no-repeat bottom left,
    url(image/back.gif) no-repeat bottom right,
    #cc9999;
  width: 100px;
  height: 100px;
  border: 1px solid gray;
  margin-left: 1em;
}

HTML

<h5>simple</h5>
<div class="sample-simple">こんにちわ</div>
<h5>multiple</h5>
<div class="sample-multiple">こんにちわ</div>

表示

simple

こんにちわ

multiple

こんにちわ

リンク

初版：1997年7月27日、最終更新：2015年11月29日

https://www.tohoho-web.com/css/prop/background.htm

CSS - background

概要

サポート (説明)

説明

使用例

simple

multiple

関連項目

リンク