background

backgroundCSS一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。

試してみましょう

構成要素のプロパティ

構文

/* <background-color> を使用 */
background: green;

/* <bg-image> と <repeat-style> を使用 */
background: url("test.jpg") repeat-y;

/* <box> と <background-color> を使用 */
background: border-box red;

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url("../img/image.png");

/* グローバル値 */
background: inherit;
background: initial;
background: revert;
background: unset;

background プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

それぞれのレイヤーの構文は以下の通りです。

  • それぞれのレイヤーは、以下の値をそれぞれ 0 ~ 1 回含めることができます。
    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • <bg-size> の値は <position> の直後に '/' の文字で区切って含めなければなりません。例: "center/80%"
  • <box> の値は 0 ~ 2 回含めることができます。1 回の場合は background-originbackground-clip の両方に設定されます。2 回の場合は、1 つ目は background-origin に、2 つ目は background-clip に設定されます。
  • <background-color> の値は最後のレイヤーの指定でのみ含めることができます。

<attachment>

background-attachment を参照

<box>

background-clip および background-origin を参照

<background-color>

background-color を参照

<bg-image>

background-image を参照

<position>

background-position を参照

<repeat-style>

background-repeat を参照

<bg-size>

background-size を参照。

アクセシビリティの考慮

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要であり、画面リーダーはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承なし
パーセント値一括指定の次の各プロパティとして
  • background-position: 背景配置領域の高さから背景画像の高さを引いた値に対する相対値。寸法は水平オフセットの幅と垂直オフセットの高さに対する相対値
  • background-size: 背景配置領域に対する相対値
計算値一括指定の次の各プロパティとして
アニメーションの種類一括指定の次の各プロパティとして

形式文法

background = 
[ <bg-layer># , ]? <final-bg-layer>

<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>

<final-bg-layer> =
<'background-color'> ||
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<box> ||
<box>

<bg-image> =
<image> |
none

<bg-position> =
[ left | center | right | top | bottom | <length-percentage> ] |
[ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] |
[ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]

<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain

<repeat-style> =
repeat-x |
repeat-y |
[ repeat | space | round | no-repeat ]{1,2}

<attachment> =
scroll |
fixed |
local

<box> =
border-box |
padding-box |
content-box

<image> =
<url> |
<gradient>

<length-percentage> =
<length> |
<percentage>

色キーワードと画像による背景の設定

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}

結果

仕様書

Specification
Unknown specification
# the-background

ブラウザーの互換性

BCD tables only load in the browser

関連情報