background

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

<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="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>

CSS

css
.warning {
  background: pink;
}

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

結果

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報