background
、background-color
、background-image
、background-size
、background-repeat
、background-position
、background-origin
、background-clip
: 背景 CSSプロパティ
このページで解説するコードの実行結果。
HTML
& CSS
このページでは、以下のコードをデフォルトとして使用している。
background
の概要
背景の「色」や「画像」を設定する。
背景の「色」を指定するのはbackground-color
であり、背景の「画像」を指定するのはbackground-image
である。
CSSプロパティ | 設定内容 |
---|---|
background-color | 色 |
background-image | 画像 |
background-color
は色を指定するだけなので単純である。
background-image
はサイズ/繰り返し/位置などを指定するため複雑である。よって、以下のような付属的なCSSプロパティがある。
CSSプロパティ | 設定内容 |
---|---|
background-size プロパティ | 大きさ |
background-repeat プロパティ | 繰り返し |
background-position プロパティ | 位置 |
background-origin プロパティ | 起点 |
background-clip プロパティ | 表示領域 |
background-color
: 背景色
カラーコードで指定する。
デフォルト値は透明(transparent
)
.sample-1 { background-color: orange; } .sample-2 { background-color: #8f8; }
background-image
: 背景画像
背景に画像ファイルのURLを指定することができる。
また、下記のようなグラデーションを使いたい場合も background-image
を使う。(background-color
と間違えやすい)
詳細は以下のリンク。
以降の解説では、下表の2つの画像ファイルを使う。
概要 | ファイル名 | 横幅 | 縦の高さ | 表示 |
---|---|---|---|---|
小さい画像 | bg-small.jpg | 80px | 48px | |
大きい画像 | bg-large.jpg | 500px | 302px |
.sample-1
のbackground-image
に小さい画像を設定し、.sample-2
のbackground-image
に大きい画像を設定する。
.sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
デフォルトでは表示される大きさは元の画像サイズになる。よって、はみ出したり、繰り返して画像が表示されている。
より細かく設定するには、以下のCSSプロパティを指定する。
CSSプロパティ | 設定 |
---|---|
background-size プロパティ | 大きさ |
background-repeat プロパティ | 繰り返し |
background-position プロパティ | 位置 |
background-origin プロパティ | 起点 |
background-clip プロパティ | 表示領域 |
background-size
: 画像サイズ
背景画像のサイズを指定する。キーワードで指定する方法と、数値(+ 単位)で指定する方法がある。
キーワードでの指定
設定値 | 機能 | デフォルト |
---|---|---|
auto | そのまま表示 | ○ |
contain | 幅に合わせる (100% auto or 100% と同じ) | |
cover | 高さに合わせる (auto 100% と同じ) |
contain
横幅100%で表示される。
.sample { background-size: contain; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
cover
縦の高さ100%で表示される。
.sample { background-size: cover; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
数値で指定
数値で指定する場合、2つの引き数を渡す。
第一引き数が横軸方向(X軸)、第二引き数が縦軸方向(Y軸)になる。
第一引き数 | 横軸方向(X軸) |
第二引き数 | 縦軸方向(Y軸) |
第二引き数が無指定の場合、デフォルト値のauto
となる。
なお、第一引き数と第二引き数の「比」が親要素の比と同じにならない場合、画像はゆがむ。
設定値 | 横方向の数 | 縦方向の数 | 画像のゆがみ |
---|---|---|---|
100% 100% | 1 | 1 | あり |
100% 50% | 1 | 2 | あり |
50% 100% | 2 | 1 | あり |
50% 50% | 2 | 2 | あり |
100% auto 、100% (=contain ) | 1 | 自動 | なし |
auto 100% (=cover ) | 自動 | 1 | なし |
50% auto 、50% | 2 | 自動 | なし |
auto 50% | 自動 | 2 | なし |
100% 100%
.sample { background-size: 100% 100%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
100% 50%
.sample { background-size: 100% 50%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
50% 100%
.sample { background-size: 50% 100%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
50% 50%
.sample { background-size: 50% 50%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
100% auto
: contain
と同じ.sample { background-size: 100% auto; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
なお、第二引き数のauto
を指定しなくても結果は同じ。
.sample { background-size: 100%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
auto 100%
: cover
と同じ.sample { background-size: auto 100%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
50% auto
.sample { background-size: 50% auto; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
なお、第二引き数のauto
を指定しなくても結果は同じ。
.sample { background-size: 50%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
auto 50%
.sample { background-size: auto 50%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
background-repeat
: 繰り返し
設定値 | 機能 | デフォルト |
---|---|---|
repeat | 繰り返す | ○ |
no-repeat | 繰り返さない | |
repeat-x | 横軸方向のみ繰り返す | |
repeat-y | 縦軸方向のみ繰り返す |
repeat
デフォルト値であり、繰り返す。
.sample { background-repeat: repeat; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
no-repeat
繰り返さない
.sample { background-repeat: no-repeat; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
repeat-x
横軸方向のみ繰り返す。
.sample { background-repeat: repeat-x; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
repeat-y
縦軸方向のみ繰り返す。
.sample { background-repeat: repeat-y; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
background-position
: 位置
以下のキーワードと、数値(+ 単位)で指定できる。
キーワード
設定値 | 親要素に対して |
---|---|
top | 上辺に張り付く |
bottom | 下辺に張り付く |
left | 左辺に張り付く |
right | 右辺に張り付く |
center | 中心に来る |
left top | 左上の角が一致 |
right top | 右上の角が一致 |
right bottom | 右下の角が一致 |
left bottom | 左下の角が一致 |
top
親要素の上辺に張り付く。横位置は中心。
.sample { background-repeat: no-repeat; background-position: top; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
bottom
親要素の下辺に張り付く。横位置は中心。
.sample { background-repeat: no-repeat; background-position: bottom; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
left
親要素の左辺に張り付く。縦位置は中心。
.sample { background-repeat: no-repeat; background-position: left; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
right
親要素の右辺に張り付く。縦位置は中心。
.sample { background-repeat: no-repeat; background-position: right; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
center
親要素の中心。
.sample { background-repeat: no-repeat; background-position: center; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
left top
親要素の左上の角に一致。
.sample { background-repeat: no-repeat; background-position: left top; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
right top
親要素の右上の角に一致。
.sample { background-repeat: no-repeat; background-position: right top; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
right bottom
親要素の右下の角に一致。
.sample { background-repeat: no-repeat; background-position: right bottom; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
left bottom
親要素の左下の角に一致。
.sample { background-repeat: no-repeat; background-position: left bottom; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
%
で指定する
2つの引き数で指定する。第一引き数は横軸方向、第二引き数は縦軸方向になる。
左上の角 | left top | 0 0 |
右上の角 | right top | 100% 0 |
右下の角 | right bottom | 100% 100% |
左下の角 | left bottom | 0 100% |
10% 10% | left 10% top 10% |
90% 10% | right 10% top 10% |
90% 90% | right 10% bottom 10% |
10% 90% | left 10% bottom 10% |
.sample { background-repeat: no-repeat; background-position: 10% 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
これはleft 10% top 10%
と同じ。
.sample { background-repeat: no-repeat; background-position: left 10% top 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
.sample { background-repeat: no-repeat; background-position: 90% 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
これはright 10% top 10%
と同じ。
.sample { background-repeat: no-repeat; background-position: right 10% top 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
.sample { background-repeat: no-repeat; background-position: 90% 90%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
これはright 10% bottom 10%
と同じ。
.sample { background-repeat: no-repeat; background-position: right 10% bottom 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
.sample { background-repeat: no-repeat; background-position: 10% 90%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
これはleft 10% bottom 10%
と同じ。
.sample { background-repeat: no-repeat; background-position: left 10% bottom 10%; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
background-origin
: 表示領域の起点
背景画像の表示領域の起点を指定する。
border-box
border
の外側から表示される。よって、border
によって背景画像の一部が隠される。
.sample { background-origin: border-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
padding-box
border
の内側から表示される。
border-style
がdotted
/dashed
/double
などの場合、部分的に背景色(background-color
)が表示される。(←この例では黄色部分)
.sample { background-origin: padding-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
content-box
padding
を設定している場合、padding
の内側から表示される。
padding
の部分には背景色(background-color
)が表示される。(←この例では黄色部分)
.sample { background-origin: content-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
background-clip
: 表示領域
背景画像の表示領域を指定する。
border-box
.sample { background-clip: border-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
padding-box
.sample { background-clip: padding-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
content-box
.sample { background-clip: content-box; background-repeat: no-repeat; border: 1em dashed red; padding: 1em; background-color: yellow; } .sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); } .sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }
Emmet : bg
記述 | Visual Studio Code |
---|---|
bg | background: #000; |
bgc | background-color: #fff; |
bgi | background-image: url(); |
bgs | background-size: contain; |
bgr | background-repeat: no-repeat; |
bgp | background-position: 0 0; |
bgo | background-origin: padding-box; |
bgcp | background-clip: padding-box; |