CSS | background | 背景

backgroundは背景を指定するためのCSSプロパティです。 background-color(背景色)、background-image(背景画像、グラデーション)、background-repeat(繰り返し)、background-size(大きさ)、background-position(起点)、background-origin/background-clip(境界)についても解説します。

`background`プロパティ

CSSプロパティ	設定内容	デフォルト値
`background-color`	背景色	`transparent`
`background-image`	背景画像、グラデーション	`none`

背景色の指定にはbackground-color、背景画像とグラデーションの指定にはbackground-imageを使いますが、これらをbackgroundプロパティとして書くこともできます。

それぞれの詳細は後述しますが、background-colorをbackgroundと書いても同じ表示結果になります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: lightgreen;
}

実行結果background-color

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background: lightgreen;
}

実行結果background

sample

同じようにbackground-imageでもbackgroundでも同じ結果です。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image: url( "/images/samples/flower.jpg" );
}

実行結果background-image

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background: url( "/images/samples/flower.jpg" );
}

実行結果background

sample

`background-color` | 背景色

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

実行結果初期状態

sample

背景色はbackground-colorプロパティにカラーコードを指定します。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: lightgreen;
}

実行結果lightgreen

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #ee91ee;
}

実行結果#ee91ee

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #359;
}

実行結果#359

sample

`: transparent`

デフォルト値はtransparent(透過色)です。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: transparent;
}

実行結果transparent

sample

文字が読みにくい場合

背景色が濃いために文字が読みにくい場合には、colorプロパティで(文字の色を)明るい色に変更しましょう。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #359;
}

実行結果文字が読みにくい

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #359;
    color:            white;
}

実行結果color: white

sample

もしくはtext-shadowプロパティで周りを明るくする方法もあります。

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #359;
    text-shadow:      0 0 5px white;
}

実行結果text-shadow

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
  display:   inline-block; /* インライン・ブロック要素 */
  font-size: 2rem;         /* 文字の大きさ */
  padding:   1.5rem;       /* 内側の余白 */
}

CSS


.sample {
    background-color: #359;
    text-shadow:
         3px  3px 5px white,
        -3px  3px 5px white,
        -3px -3px 5px white,
         3px -3px 5px white;
}

実行結果text-shadowを重ねる

sample

`background-clip` | 色の境界

背景色background-colorの境界を詳細に設定するには、background-clipを使います。

`background-clip`の設定値
設定値	着色領域	デフォルト値
`border-box`	境界線(`border`)の下＋ `padding`の外側＋ `padding`の内側
`padding-box`	`padding`の外側＋ `padding`の内側
`content-box`	`padding`の内側

.sampleクラスを持つ<div>要素を準備します。デフォルトでは境界線(border)の下まで背景色(orange)が着色されていることを確認してください。

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  orange;
    border:     10px dotted blue;   /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    font-size:  2rem;           /* 文字の大きさ */
    padding:    20px;           /* 内側の余白 */
}

実行結果初期状態

sample

background-clipにborder-box、padding-box、content-boxを指定してみます。着色の領域が狭くなっていくことが分かります。

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  orange;
    border:     10px dotted blue;   /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    font-size:  2rem;           /* 文字の大きさ */
    padding:    20px;           /* 内側の余白 */
}

CSS


.sample {
    background-clip: border-box;
}

実行結果border-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  orange;
    border:     10px dotted blue;   /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    font-size:  2rem;           /* 文字の大きさ */
    padding:    20px;           /* 内側の余白 */
}

CSS


.sample {
    background-clip: padding-box;
}

実行結果padding-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  orange;
    border:     10px dotted blue;   /* 境界線 */
    display:    inline-block;   /* インライン・ブロック要素 */
    font-size:  2rem;           /* 文字の大きさ */
    padding:    20px;           /* 内側の余白 */
}

CSS


.sample {
    background-clip: content-box;
}

実行結果content-box

sample

border-boxの場合は(無指定の場合と同じく)境界線の下まで着色されていますが、padding-boxにすると境界線の下には着色されません。 content-boxにするとpaddingの外側も着色されなくなります。

`background-image` | 背景画像

.sampleクラスを持つ<div>要素を準備します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

実行結果初期状態

sample

背景画像に設定するには、background-imageにurl( "画像ファイルのパス" )を指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image: url( "/images/samples/flower.jpg" );
}

実行結果background-image

sample

グラデーションの指定方法についてはこのページ内で後述します。

背景画像を詳細に設定するためには、以下のCSSプロパティを共に指定する必要があります。 (これらについて、グラデーションの前に解説します。)

背景画像を詳細に設定するCSSプロパティ
CSSプロパティ	設定内容	デフォルト値	他の設定値
`background-repeat`	繰り返し	`repeat`	`no-repeat`/`repeat-x`/`repeat-y`
`background-size`	大きさ	`auto`	`contain`/`cover`
`background-position`	起点	`left top`	`center`/`top`/`bottom`/`left`/`right`/`left bottom`/`right top`/`right bottom`
`background-origin`	境界	`padding-box`	`border-box`/`content-box`

`background-repeat` | 繰り返し

background-repeatはbackground-imageと共に指定します。背景画像表示の繰り返しを指定します。

`background-repeat`の設定値
設定値	機能	デフォルト
`no-repeat`	繰り返さない
`repeat-x`	横に繰り返す
`repeat-y`	縦に繰り返す
`repeat`	縦横に繰り返す

background-imageのみを指定します。縦横の両方向に繰り返しています。(デフォルト)

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image: url( "/images/samples/flower.jpg" );
}

実行結果初期状態

sample

background-repeatにno-repeatを指定した場合、繰り返しません。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
}

実行結果no-repeat

sample

background-repeatにrepeat-xを指定した場合、横方向だけ繰り返します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: repeat-x;
}

実行結果repeat-x

sample

background-repeatにrepeat-yを指定した場合、縦方向だけ繰り返します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: repeat-y;
}

実行結果repeat-y

sample

background-repeatにrepeatを指定した場合は、無指定の場合と同じく縦横の両方向に繰り返しています。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: repeat;
}

実行結果repeat(デフォルト値)

sample

`background-size` | 大きさ

background-sizeはbackground-imageと共に指定します。背景画像表示の大きさを指定します。

`background-size`の設定値
設定値	合わせる対象	%を使った同じ意味の設定値
`contain`	(表示領域の)幅	`100% auto`、`100%`
`cover`	(表示領域の)高さ	`auto 100%`
`auto`	なし (※ そのままの大きさ)

背景画像(background-image)を指定し、画像表示(background-repeat)を繰り返さない(no-repeat)ように指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
}

実行結果初期状態

sample

background-sizeにcontainを指定した場合、画像は表示領域の幅に一致します。高さは短かったり、はみ出したりします。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   contain;
}

実行結果contain

sample

background-sizeにcoverを指定した場合、画像は表示領域の高さに一致します。幅は短かったり、はみ出したりします。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-repeat:  no-repeat;
    background-size:    cover;
}

実行結果cover

sample

background-sizeにautoを指定した場合は、無指定の場合と同じく(画像の)そのままの大きさで表示されます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-repeat:  no-repeat;
    background-size:    auto;
}

実行結果auto(デフォルト値)

sample

％で指定する方法

%を使って、表示領域に対する割合で指定することもできます。

設定値は2つです。

1つ目の値＝ (表示領域に対する)幅の割合
2つ目の値＝ (表示領域に対する)高さの割合(省略時はautoになります。)

具体的に見て行きましょう。

100% 100%と設定した場合、表示領域全体に画像が引き延ばされます。 (画像と表示領域の縦横比が同じでない場合には)画像は歪(ゆが)みます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    100% 100%;
}

実行結果100% 100%

sample

100% 50%にした場合、上下に2枚表示されます。画像は歪みます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    100% 50%;
}

実行結果100% 50%

sample

50% 100%にした場合、左右に2枚表示されます。画像は歪みます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50% 100%;
}

実行結果50% 100%

sample

50% 50%、33% 33%、50% 33%、33% 50%と指定した場合の例を示します。いずれも画像は歪んでいます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50% 50%;
}

実行結果50% 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    33% 33%;
}

実行結果33% 33%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50% 33%;
}

実行結果50% 33%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    33% 50%;
}

実行結果33% 50%

sample

このように2つの値を指定すると(通常は)画像が歪みます。これを避けるには片方をautoに指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    auto 50%;
}

実行結果auto 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    auto 33%;
}

実行結果auto 33%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50% auto;
}

実行結果50% auto

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    33% auto;
}

実行結果33% auto

sample

2つ目の値にautoを指定している場合、これを省略することができます。 50%の場合。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50% auto;
}

実行結果50% auto

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    50%;
}

実行結果50%

sample

33%の場合。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    33% auto;
}

実行結果33% auto

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-size:    33%;
}

実行結果33%

sample

以上のことからcontain、100% auto、100%は同じ表示結果になります。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   contain;
}

実行結果contain

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% auto;
}

実行結果100% auto

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100%;
}

実行結果100%

sample

また、coverとauto 100%も同じ結果です。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:   url( "/images/samples/flower.jpg" );
    background-repeat:  no-repeat;
    background-size:    cover;
}

実行結果cover

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   auto 100%;
}

実行結果auto 100%

sample

`background-position` | 起点

background-positionはbackground-imageと共に指定します。背景画像表示の起点を指定できます。

`background-position`の設定値
設定値	起点は表示領域の・・・	%を使った同じ意味の設定値
`center`	中心	`50% 50%`
`top`	上辺の中央	`50% 0`
`bottom`	下辺の中央	`50% 100%`
`left`	左辺の中央	`0 50%`
`right`	右辺の中央	`100% 50%`
`left top`	左上の角	`0 0`
`right top`	右上の角	`100% 0`
`right bottom`	右下の角	`100% 100%`
`left bottom`	左下の角	`0 100%`

背景画像(background-image)を指定し、画像表示(background-repeat)を繰り返さない(no-repeat)ように指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
}

実行結果初期状態

sample

background-positionにcenterを指定した場合、表示領域の中心に表示されます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: center;
}

実行結果center

sample

background-positionにtop/bottom/left/rightと指定した場合、それぞれ上辺/下辺/左辺/右辺の中央に表示されます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: top;
}

実行結果top

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: bottom;
}

実行結果bottom

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: left;
}

実行結果left

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: right;
}

実行結果right

sample

left top/right top/right bottom/left bottomと指定した場合、角に接して表示されます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: left top;
}

実行結果left top

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: right top;
}

実行結果right top

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: right bottom;
}

実行結果right bottom

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: left bottom;
}

実行結果left bottom

sample

デフォルト値はleft topです。

％で指定する方法

%を使って、表示領域に対する割合で指定することもできます。

設定値は2つです。

1つ目の値＝ (表示領域に対する)横方向の割合。0が左辺に接し、100%が右辺に接します。
2つ目の値＝ (表示領域に対する)縦方向の割合。0が上辺に接し、100%が下辺に接します。

0 50%、25% 50%、50% 50%、75% 50%、100% 50%と指定すると右に移動して行きます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 0 50%;
}

実行結果0 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 25% 50%;
}

実行結果25% 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 50%;
}

実行結果50% 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 75% 50%;
}

実行結果75% 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 100% 50%;
}

実行結果100% 50%

sample

50% 0、50% 25%、50% 50%、50% 75%、50% 100%と指定すると下に移動して行きます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 0;
}

実行結果50% 0

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 25%;
}

実行結果50% 25%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 50%;
}

実行結果50% 50%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 75%;
}

実行結果50% 75%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 50% 100%;
}

実行結果50% 100%

sample

20% 30%をright 80% bottom 70%と書くこともできます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: 20% 30%;
}

実行結果20% 30%

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-repeat:   no-repeat;
    background-position: right 80% bottom 70%;
}

実行結果right 80% bottom 70%

sample

応用 : 帯(おび)を作る

background-positionをcenterにします。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-position: center;
}

実行結果background-position: center

sample

加えて、繰り返し(background-repeat)をrepeat-xかrepeat-yにすると、横か縦の帯ができます。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-position: center;
    background-repeat:   repeat-x;
}

実行結果background-repeat: repeat-x

sample

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image:    url( "/images/samples/flower.jpg" );
    background-position: center;
    background-repeat:   repeat-y;
}

実行結果background-repeat: repeat-y

sample

`background-origin` | 画像の境界

背景画像background-imageの境界を詳細に設定するには、background-originを使います。

`background-origin`の設定値
設定値	着色領域	デフォルト値
`border-box`	境界線(`border`)の下＋ `padding`の外側＋ `padding`の内側
`padding-box`	`padding`の外側＋ `padding`の内側
`content-box`	`padding`の内側

.sampleクラスを持つ<div>要素を準備します。デフォルトでは背景画像はpaddingの外側まで広がって表示されていることを確認してください。

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

実行結果初期状態

sample

background-originにborder-box、padding-box、content-boxを指定してみます。背景画像の広がりが狭くなっていくことが分かります。

border-boxの場合は境界線(border)の下まで背景画像が(少し拡大されて)表示されています。 padding-boxは無指定の場合と同じです。 content-boxにするとpaddingの内側のみに背景画像が表示されます。このとき画像は縮小されています。

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-origin: border-box;
}

実行結果border-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-origin: padding-box;
}

実行結果padding-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-origin: content-box;
}

実行結果content-box

sample

ちなみにbackground-originではなくbackground-clipとして指定した場合、背景画像を切り取るのではなく背景色を切り取ることになるので、背景画像は縮小や拡大されることはありません。 (background-size: 100% 100%を指定しているので、元から歪んでいますが。)

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-clip: border-box;
}

実行結果border-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-clip: padding-box;
}

実行結果padding-box

sample

HTML


<div class="sample">sample</div>

CSS


.sample {
    background-color:  yellow;
    background-image:  url( "/images/samples/flower.jpg" );
    background-repeat: no-repeat;
    background-size:   100% 100%;
    border:    15px dotted blue; /* 境界線 */
    color:     blue;             /* 文字の色 */
    display:   inline-block;     /* インライン・ブロック要素 */
    font-size: 2rem;             /* 文字の大きさ */
    padding:   30px;             /* 内側の余白 */
}

CSS


.sample {
    background-clip: content-box;
}

実行結果content-box

sample

グラデーション

背景にグラデーションを使用するにもbackground-imageを使います。

線形グラデーションを指定するにはlinear-gradient()を指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image: linear-gradient( dodgerblue, yellow );
}

実行結果線形グラデーション

sample

円形グラデーションを指定するにはradial-gradient()を指定します。

HTML


<div class="sample">sample</div>

CSS


div {
  border:      5px solid #05b; /* 境界線 */
  height:      250px;          /* 高さ */
  width:       230px;          /* 幅 */
  padding:     1rem;           /* 内側の余白 */
  text-align:  center;         /* 左右に寄せる */
  text-shadow: 0 0 10px white; /* 文字の影 */
}

CSS


.sample {
    background-image: radial-gradient( #fd0, #05b );
}

実行結果円形グラデーション

sample

backgroundプロパティ

background-color | 背景色

: transparent

文字が読みにくい場合

background-clip | 色の境界

background-image | 背景画像

background-repeat | 繰り返し

background-size | 大きさ

％で指定する方法

background-position | 起点

％で指定する方法

応用 : 帯(おび)を作る

background-origin | 画像の境界

グラデーション

`background`プロパティ

`background-color` | 背景色

`: transparent`

`background-clip` | 色の境界

`background-image` | 背景画像

`background-repeat` | 繰り返し

`background-size` | 大きさ

`background-position` | 起点

`background-origin` | 画像の境界