background-image - 背景画像

2017/11/02

background-imageは、背景画像を指定するプロパティです。画像はurl、データURI、グラデーション関数など、様々な方法で指定できます。

概要

名前

background-image

値

<bg-image> = <image> | none
<image> = <url> | <cross-fade()> | <gradient>
<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>?
<length-percentage> = [ <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>? )

初期値

none

適用対象

全ての要素。

継承

しない。

パーセンテージ

N/A

メディア

visual

計算値

as specified, but with URIs made absolute

アニメーションの可否

N/A

仕様書

https://drafts.csswg.org/css-backgrounds-3/#propdef-background-image

チュートリアル

none

noneを指定すると、背景画像をなし、つまり透過にできます。この値は初期値です。

body {
	background-image: none ;
}

url()

背景画像をurlで指定する時は、url()を利用します。()内に画像ファイルのパスを指定して下さい。パスはa要素のhref属性と同じ方法で指定できます。

body {
	background-image: url( ./image.png ) ;
}

グラデーション

専用の関数を利用して、グラデーションを背景画像とすることもできます。これなら画像ファイルを用意する必要がありません。

body {
	background-image: linear-gradient( red, blue ) ;
}

複数のレイヤー

背景画像を複数重ねたい場合はコンマ(,)で区切ります。先頭側が手前に表示されます。

body {
	background-image: url( ./image.png ), linear-gradient( red, blue ) ;
}

デモ

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

<!DOCTYPE html>
<html>
<head>
<style>
#hoge {
	background-image: url(./image.png) ;
}

#fuga {
	background-image: linear-gradient( red, blue ) ;
}

#piyo {
	background-image: url(./image.png), linear-gradient( red, blue ) ;
}

div {
	border: 1px solid #000 ;
	height: 180px ;
	margin-bottom: 24px ;
}
</style>
</head>
<body>
	<p>url()</p>
	<div id="hoge"></div>
	<p>linear-gradient()</p>
	<div id="fuga"></div>
	<p>複数のレイヤー</p>
	<div id="piyo"></div>
</body>
</html>