background-image - 背景画像
background-imageは、背景画像を指定するプロパティです。画像はurl、データURI、グラデーション関数など、様々な方法で指定できます。
概要
- 名前
- background-image
- 値
- <bg-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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- background-repeat
- background-repeatは、背景の繰り返し表示を調整するプロパティです。
- background
- backgroundは、背景に関する各プロパティをまとめて指定できる、ショートハンド・プロパティです。
- background-color
- background-colorは、要素の背景色を設定するプロパティです。背景色は、背景画像の後ろに描画されます。
- background-attachment
- background-attachmentは、スクロール時の背景画像の挙動を制御するプロパティです。スクロールと一緒に画像が流れるのか、それとも固定されるのかを指定できます。