background、background-color、background-image、background-size、background-repeat、background-position、background-origin、background-clip : 背景 - CSSプロパティ - Web開発

概要へ移動

このページで解説するコードの実行結果。

実行結果

sample-1

sample-2

線形グラデーション

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

実行結果

sample-1

sample-2

デフォルト HTML & CSS

このページでは、以下のコードをデフォルトとして使用している。

CSS : デフォルトCSS


div {
    width:              15em;           /*  幅 */      
    height:             15em;           /*  高さ */           
    border:             1px solid gray; /*  境界線 */
    margin:             1em;            /*  外側の余白 */
    display:            inline-block;   /*  横並び */
}

HTML : 適用するHTML


<div class="sample sample-1">    sample-1  </div>
<div class="sample sample-2">    sample-2  </div>

実行結果

sample-1

sample-2

`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）

CSS : color


.sample-1  {
    background-color:   orange;
}

.sample-2  {
    background-color:   #8f8;
}

実行結果

sample-1

sample-2

`background-image` : 背景画像

背景に画像ファイルのURLを指定することができる。

また、下記のようなグラデーションを使いたい場合も background-imageを使う。（background-colorと間違えやすい）

線形グラデーション

詳細は以下のリンク。

以降の解説では、下表の２つの画像ファイルを使う。

概要	ファイル名	横幅	縦の高さ	表示
小さい画像	`bg-small.jpg`	`80px`	`48px`
大きい画像	`bg-large.jpg`	`500px`	`302px`

.sample-1のbackground-imageに小さい画像を設定し、.sample-2のbackground-imageに大きい画像を設定する。

CSS : image


.sample-1  {
    background-image: url( "/img/samples/bg-small.jpg" );
}

.sample-2  {
    background-image: url( "/img/samples/bg-large.jpg" );
}

実行結果

sample-1

sample-2

デフォルトでは表示される大きさは元の画像サイズになる。よって、はみ出したり、繰り返して画像が表示されている。

より細かく設定するには、以下のCSSプロパティを指定する。

CSSプロパティ	設定
`background-size`プロパティ	大きさ
`background-repeat`プロパティ	繰り返し
`background-position`プロパティ	位置
`background-origin`プロパティ	起点
`background-clip`プロパティ	表示領域

`background-size` : 画像サイズ

背景画像のサイズを指定する。キーワードで指定する方法と、数値（＋単位）で指定する方法がある。

キーワードでの指定

（表） `background-size`の設定値
設定値	機能	デフォルト
`auto`	そのまま表示	○
`contain`	幅に合わせる（`100% auto` or `100%`と同じ）
`cover`	高さに合わせる（`auto 100%`と同じ）

contain

横幅100%で表示される。

CSS : image


.sample  {
    background-size: contain;
}

.sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); }
.sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }

実行結果

sample-1

sample-2

cover

縦の高さ100%で表示される。

CSS : image


.sample  {
    background-size: cover;
}

.sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); }
.sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }

実行結果

sample-1

sample-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%

CSS : image


.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" ); }

実行結果

sample-1

sample-2

100% 50%

CSS : image


.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" ); }

実行結果

sample-1

sample-2

50% 100%

CSS : image


.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" ); }

実行結果

sample-1

sample-2

50% 50%

CSS : image


.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" ); }

実行結果

sample-1

sample-2

100% auto : containと同じ

CSS : image


.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" ); }

実行結果

sample-1

sample-2

なお、第二引き数のautoを指定しなくても結果は同じ。

CSS : image


.sample  {
    background-size: 100%;
}

.sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); }
.sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }

実行結果

sample-1

sample-2

auto 100% : coverと同じ

CSS : image


.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" ); }

実行結果

sample-1

sample-2

50% auto

CSS : image


.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" ); }

実行結果

sample-1

sample-2

なお、第二引き数のautoを指定しなくても結果は同じ。

CSS : image


.sample  {
    background-size: 50%;
}

.sample-1 { background-image: url( "/img/samples/bg-small.jpg" ); }
.sample-2 { background-image: url( "/img/samples/bg-large.jpg" ); }

実行結果

sample-1

sample-2

auto 50%

CSS : image


.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" ); }

実行結果

sample-1

sample-2

`background-repeat` : 繰り返し

（表） `background-repeat`の設定値
設定値	機能	デフォルト
`repeat`	繰り返す	○
`no-repeat`	繰り返さない
`repeat-x`	横軸方向のみ繰り返す
`repeat-y`	縦軸方向のみ繰り返す

repeat

デフォルト値であり、繰り返す。

CSS : 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" ); }

実行結果

sample-1

sample-2

no-repeat

繰り返さない

CSS : 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" ); }

実行結果

sample-1

sample-2

repeat-x

横軸方向のみ繰り返す。

CSS : no-repeat


.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" ); }

実行結果

sample-1

sample-2

repeat-y

縦軸方向のみ繰り返す。

CSS : no-repeat


.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" ); }

実行結果

sample-1

sample-2

`background-position` : 位置

以下のキーワードと、数値（＋単位）で指定できる。

キーワード

（表） `background-position`の設定値
設定値	親要素に対して
`top`	上辺に張り付く
`bottom`	下辺に張り付く
`left`	左辺に張り付く
`right`	右辺に張り付く
`center`	中心に来る
`left top`	左上の角が一致
`right top`	右上の角が一致
`right bottom`	右下の角が一致
`left bottom`	左下の角が一致

top

親要素の上辺に張り付く。横位置は中心。

CSS : 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" ); }

実行結果

sample-1

sample-2

bottom

親要素の下辺に張り付く。横位置は中心。

CSS : 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" ); }

実行結果

sample-1

sample-2

left

親要素の左辺に張り付く。縦位置は中心。

CSS : 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" ); }

実行結果

sample-1

sample-2

right

親要素の右辺に張り付く。縦位置は中心。

CSS : 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" ); }

実行結果

sample-1

sample-2

center

親要素の中心。

CSS : 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" ); }

実行結果

sample-1

sample-2

left top

親要素の左上の角に一致。

CSS : 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" ); }

実行結果

sample-1

sample-2

right top

親要素の右上の角に一致。

CSS : 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" ); }

実行結果

sample-1

sample-2

right bottom

親要素の右下の角に一致。

CSS : 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" ); }

実行結果

sample-1

sample-2

left bottom

親要素の左下の角に一致。

CSS : 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" ); }

実行結果

sample-1

sample-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%`

10% 10%

CSS : 10% 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" ); }

実行結果

sample-1

sample-2

これはleft 10% top 10% と同じ。

CSS : 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-1

sample-2

90% 10%

CSS : 90% 10%


.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" ); }

実行結果

sample-1

sample-2

これはright 10% top 10% と同じ。

CSS : 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-1

sample-2

90% 90%

CSS : 90% 90%


.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" ); }

実行結果

sample-1

sample-2

これはright 10% bottom 10% と同じ。

CSS : 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-1

sample-2

10% 90%

CSS : 10% 90%


.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" ); }

実行結果

sample-1

sample-2

これはleft 10% bottom 10% と同じ。

CSS : 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" ); }

実行結果

sample-1

sample-2

`background-origin` : 表示領域の起点

背景画像の表示領域の起点を指定する。

（表） `background-origin`の設定値
設定値	表示領域	デフォルト
`border-box`	`border`の外側から	○
`padding-box`	`border`の内側から
`content-box`	`padding`の内側から

`border-box`

borderの外側から表示される。よって、borderによって背景画像の一部が隠される。

CSS : border-box


.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" ); }

実行結果

sample-1

sample-2

`padding-box`

borderの内側から表示される。

border-styleがdotted／dashed／doubleなどの場合、部分的に背景色（background-color）が表示される。（←この例では黄色部分）

CSS : padding-box


.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" ); }

実行結果

sample-1

sample-2

`content-box`

paddingを設定している場合、paddingの内側から表示される。

paddingの部分には背景色（background-color）が表示される。（←この例では黄色部分）

CSS : content-box


.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" ); }

実行結果

sample-1

sample-2

`background-clip` : 表示領域

背景画像の表示領域を指定する。

（表） `background-clip`の設定値
設定値	表示領域	デフォルト
`border-box`	`border`の外側	○
`padding-box`	`border`の内側
`content-box`	`padding`の内側

`border-box`

CSS : 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" ); }

実行結果

sample-1

sample-2

`padding-box`

CSS : 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" ); }

実行結果

sample-1

sample-2

`content-box`

CSS : 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" ); }

実行結果

sample-1

sample-2

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;`

リンク

MDN（日本語） > CSS > background

backgroundの概要

background-color : 背景色

background-image : 背景画像

background-size : 画像サイズ

キーワードでの指定

数値で指定

background-repeat : 繰り返し

background-position : 位置

キーワード

%で指定する

background-origin : 表示領域の起点

border-box

padding-box

content-box

background-clip : 表示領域

border-box

padding-box

content-box

Emmet : bg

リンク

`background`の概要

`background-color` : 背景色

`background-image` : 背景画像

`background-size` : 画像サイズ

`background-repeat` : 繰り返し

`background-position` : 位置

`%`で指定する

`background-origin` : 表示領域の起点

`border-box`

`padding-box`

`content-box`

`background-clip` : 表示領域

`border-box`

`padding-box`

`content-box`

Emmet : `bg`