background

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

backgroundCSS一括指定プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。 background 一括指定プロパティの値宣言で設定されていない成分のプロパティは、既定値に設定されます。

試してみましょう

構成要素のプロパティ

構文

css
/* <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: revert-layer;
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 を参照。既定値は scroll です。

<box>

background-clip および background-origin を参照。既定値はそれぞれ border-box および padding-box です。

<background-color>

background-color を参照。既定値は transparent です。

<bg-image>

background-image を参照。既定値は none です。

<position>

background-position を参照。既定値は 0% 0% です。

<repeat-style>

background-repeat を参照。既定値は repeat です。

<bg-size>

background-size を参照。既定値は auto です。

以下の 3 行の CSS は等価です。

css
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

公式定義

初期値一括指定の次の各プロパティとして
適用対象すべての要素。 ::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> ||
<visual-box> ||
<visual-box>

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

<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

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

<background-color> =
<color>

<image> =
<url> |
<gradient>

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

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

アクセシビリティ

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

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

HTML

html
<p class="top-banner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">これは段落です</p>
<p></p>

CSS

css
.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #99f repeat-y fixed;
}

結果

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-background

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background
SVG image as background
Values of background-clip longhand
Values of background-origin longhand
Values of background-size longhand
Multiple backgrounds

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報