概要へ移動

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

実行結果
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プロパティがある。

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と間違えやすい)

詳細は以下のリンク。

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

概要ファイル名横幅縦の高さ表示
小さい画像bg-small.jpg80px48px
大きい画像bg-large.jpg500px302px

.sample-1background-imageに小さい画像を設定し、.sample-2background-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プロパティを指定する。

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

数値で指定

数値で指定する場合、2つの引き数を渡す。

第一引き数が横軸方向(X軸)、第二引き数が縦軸方向(Y軸)になる。

第一引き数横軸方向(X軸)
第二引き数縦軸方向(Y軸)

第二引き数が無指定の場合、デフォルト値のautoとなる。

なお、第一引き数と第二引き数の「比」が親要素の比と同じにならない場合、画像はゆがむ。

設定値横方向の数縦方向の数画像のゆがみ
100% 100%11あり
100% 50%12あり
50% 100%21あり
50% 50%22あり
100% auto100% (=contain1自動なし
auto 100% (=cover自動1なし
50% auto50%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

%で指定する

2つの引き数で指定する。第一引き数は横軸方向、第二引き数は縦軸方向になる。

左上の角left top0 0
右上の角right top100% 0
右下の角right bottom100% 100%
左下の角left bottom0 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-boxborderの外側から
padding-boxborderの内側から
content-boxpaddingの内側から

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-styledotteddasheddoubleなどの場合、部分的に背景色(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-boxborderの外側
padding-boxborderの内側
content-boxpaddingの内側

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
bgbackground: #000;
bgcbackground-color: #fff;
bgibackground-image: url();
bgsbackground-size: contain;
bgrbackground-repeat: no-repeat;
bgpbackground-position: 0 0;
bgobackground-origin: padding-box;
bgcpbackground-clip: padding-box;