SYNCERのロゴ
アイキャッチ画像

background - 背景

backgroundは、背景に関する各プロパティをまとめて指定できる、ショートハンド・プロパティです。

概要

名前
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> | 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> | <cross-fade()> | <gradient>
<length-percentage> = [ <length> | <percentage> ]
<url> = url( <string> <url-modifier>* )
cross-fade() = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
linear-gradient() = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
radial-gradient() = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <gray()> | <device-cmyk()> | <color-mod()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<side-or-corner> = [left | right] || [top | bottom]
<color-stop-list> = <color-stop>#{2,}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
rgb() = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? )
hsl() = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
hwb() = hwb( <hue> <percentage> <percentage> [ / <alpha-value> ]? )
gray() = gray( <number> [ / <alpha-value> ]? )
device-cmyk() = device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? , <color>? )
color-mod() = color( [ <color> | <hue> ] <color-adjuster>* )
<color-stop> = <color> <length-percentage>?
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<cmyk-component> = <number> | <percentage>
<color-adjuster> =  [red( | green( | blue( | alpha( | a(] ['+' | '-']? [<number> | <percentage>] ) |  [red( | green( | blue( | alpha( | a(] '*' <percentage> ) |  rgb( ['+' | '-'] [<number> | <percentage>]{3} ) |  rgb( ['+' | '-'] <hash-token> ) |  rgb( '*' <percentage> ) |  [hue( | h(] ['+' | '-' | '*']? <angle> ) |  [saturation( | s(] ['+' | '-' | '*']? <percentage> ) |  [lightness( | l(] ['+' | '-' | '*']? <percentage> ) |  [whiteness( | w(] ['+' | '-' | '*']? <percentage> ) |  [blackness( | b(] ['+' | '-' | '*']? <percentage> ) |  tint( <percentage> ) |  shade( <percentage> ) |  blend( <color> <percentage> [rgb | hsl | hwb]? ) |  blenda( <color> <percentage> [rgb | hsl | hwb]? ) |  contrast( <percentage>? )
初期値
see individual properties
適用対象
全ての要素。
継承
しない。
パーセンテージ
see individual properties
メディア
visual
計算値
see individual properties
アニメーションの可否
see individual properties
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background

チュートリアル

いくつか抑えるべきルールを説明していきます。次のように各プロパティの値をまとめて指定できます。

div {
	background: url(./image.png) top left / 100px no-repeat scroll content-box padding-box red ;
}

/*
	background-image: url(./image.png)
	background-position: top left
	background-size: 100px
	background-repeat: no-repeat
	background-attachment: scroll
	background-origin: content-box
	background-clip: content-box
	background-color: red
*/

背景は複数のレイヤーを重ねられます。複数指定するには、レイヤーごとにコンマ(,)で区切って下さい。先頭のレイヤーほど、手前に表示されます。

div {
	background: url(./image1.png) top left / 100px content-box padding-box, url(./image2.png) bottom right ;
}

/* 1枚目
	background-image: url(./image1.png)
	background-position: top left
	background-size: 100px
	background-origin: content-box
	background-clip: padding-box
*/

/* 2枚目
	background-image: url(./image2.png)
	background-position: bottom right
*/

background-colorは最後のレイヤーでのみ指定できます。

/* 正しい例 */
div {
	background: url(./image1.png), url(./image2.png), url(./image3.png) red ;
}

/* 間違った例 */
div {
	background: red url(./image1.png), url(./image2.png), url(./image3.png) ;
}

値は省略できます。値を省略した場合、そのプロパティの初期値を指定したのと同じ扱いになります。

div {
	background: url(./image.png) top left / 100px no-repeat scroll content-box padding-box red ;
}
/*
	background-repeat: no-repeat
	background-attachment: scroll
*/

div {
	background: url(./image.png) top left / 100px content-box padding-box ;
}
/*
	background-repeat: 初期値
	background-attachment: 初期値
*/

指定の順番は基本的に自由です。下記はいずれも同じ結果となります。

div {
	background: url(./image.png) top left / 100px no-repeat scroll content-box padding-box red ;
}

div {
	background: top left / 100px url(./image.png) no-repeat content-box red scroll padding-box ;
}

div {
	background: red content-box scroll url(./image.png) no-repeat padding-box top left / 100px ;
}

background-originbackground-clipは、1つ目の値がbackground-origin、2つ目の値がbackground-clipに適用されます。つまり、background-originを省略してbackground-clipの値だけを指定することはできません。

div {
	background: url(./image.png) content-box padding-box ;
}
/*
	background-origin: content-box
	background-clip: padding-box
*/

div {
	background: url(./image.png) content-box ;
}
/*
	background-origin: content-box
	background-clip: 初期値
*/

background-sizeは、background-positionの後のスラッシュ(/)に続いて指定しなければいけません。つまり、background-positionを省略してbackground-sizeの値だけを指定することはできません。

div {
	background: url(./image.png) top left / 100px ;
}
/*
	background-position: top left
	background-size: 100px
*/

div {
	background: url(./image.png) top left ;
}
/*
	background-position: top left
	background-size: 初期値
*/

div {
	background: url(./image.png) 100px ;
}
/* 不正な指定 */

デモ

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background: url(./image.png) repeat-x top left / 75px, linear-gradient( red, transparent ) ;
	border: 1px dotted #000 ;
	margin: 0 0 24px ;
	height: 175px ;
}
</style>
</head>
<body>
	<div></div>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年11月4日 (土)
コンテンツを公開しました。