【基本編】CSSで背景を設定するbackground関連プロパティの使い方

【 2025/04/29 21:05 更新】

CSSでの背景の設定はどんなことができる？

CSSには、要素に背景を設定するためのCSSプロパティがたくさん用意されています。

背景に色を設定できる。(background-color)
背景に画像を設定できる。(background-image)
背景画像の繰り返し設定ができる。(background-repeat)
背景画像のサイズ設定ができる。(background-size)
背景画像の位置設定ができる。(background-position)
背景画像のスクロール時の位置を設定。(background-attachment)
背景の表示範囲を設定できる。(background-clip)
背景画像の表示の開始位置を設定できる。(background-origin)

本記事では背景の基本になるbackground-color,background-image,background-repeat,background-sizeについて説明するよ！

【背景関係プロパティの上級編の記事】
【上級編】CSSで背景を設定するbackground関連プロパティの使い方 | こじはなNote

背景色：background-color

background-colorプロパティは、背景の色を設定できます。

【 test.css 】


.block {
    width: 100px;
    height: 100px;
}
.bg-red {
    background-color: red;
}
.bg-blue {
    background-color: blue;
}

【 HTMLファイル】


<div class="block bg-red">赤色の背景</div>
<div class="block bg-blue">青色の背景</div>

ブラウザで実行するとこんな感じです。

背景にbackground-colorに指定した色がつきました。

背景画像：background-image

background-imageプロパティは、背景の画像を設定できます。
また、複数の背景を設定することができます。

【コードの例で使用する画像】

【 test.css 】


.block {
    width: 100px;
    height: 100px;
}
.bg-img-01 {
    background-image: url(../img/cojihana-logo.png);
}
.bg-img-02 {
    background-image:
        url(../img/cojihana-logo.png),
        url(../img/frame.png);
}

【 HTMLファイル】


<div class="block bg-img-01"></div>
<br>
<div class="block bg-img-02"></div>

ブラウザで実行するとこんな感じです。

背景にbackground-imageに指定した画像が背景になりました。
でもなんだか中途半端...

綺麗に表示させるには

綺麗に表示させるには、画像に合わせたheight・widthの調整や後述するbackground-repeat・background-sizeプロパティの設定が必要です。

url()には画像ファイルのパスを指定

url()には背景にしたい画像のパスを指定します。

【パスの基本に関する記事】
パス・ディレクトリとは？開発で必須なパスの基本知識と読み方を解説！ | こじはなNote

後に指定するほど背面になる

「background-image:
url(../img/cojihana-logo.png),
url(../img/frame.png);」
のように2つ以上背景を設定する場合、先に指定した背景が前面となり、
後に指定するほど背面となります。

背景画像の繰り返し有無：background-repeat

background-repeatプロパティは、背景の繰り返しの指定ができます。

デフォルトはbackground-repeat: repeat;と同じ状態で、繰り返されて表示されます。

background-imageが適用対象

background-imageの背景画像だけが反映されます。
background-colorの背景色には反映されません。

【コードの例で使用する画像】

【 test.css 】


.block {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    background-image: url(../img/cojihana-logo.png);
}
.bg-rpt-no-repeat {
    background-repeat: no-repeat;
}
.bg-rpt-repeat {
    background-repeat: repeat;
}
.bg-rpt-repeat-x {
    background-repeat: repeat-x;
}
.bg-rpt-repeat-y {
    background-repeat: repeat-y;
}
.bg-rpt-space {
    background-repeat: space;
}
.bg-rpt-round {
    background-repeat: round;
}
.bg-rpt-round-space {
    background-repeat: round space;
}

【 HTMLファイル】


<div class="block bg-rtp-no-repeat">no-repeat</div>
<br>
<div class="block bg-rpt-repeat">repeat</div>
<br>
<div class="block bg-rpt-repeat-x">repeat-x</div>
<br>
<div class="block bg-rpt-repeat-y">repeat-y</div>
<br>
<div class="block bg-rpt-space">space</div>
<br>
<div class="block bg-rpt-round">round</div>
<br>
<div class="block bg-rpt-round-space">round space</div>

ブラウザで実行するとこんな感じです。

background-repeatに指定した値によって画像の表示が変わりました。

background-repeatの値について説明

no-repeat	背景画像の繰り返しをしない設定です。
repeat	背景画像の繰り返しをする設定です。 background-repeatを指定していない場合、デフォルトで設定されます。
repeat-x	背景画像の水平方向の繰り返しをする設定です。
repeat-y	背景画像の垂直方向の繰り返しをする設定です。
space	背景画像が入る分だけ繰り返しされます。背景同士の間には余白ができ、一番端の画像は要素の隅へ配置されます。
round	背景画像が入る分だけ繰り返しされ、余裕分伸ばされます。
値2つ (値1 値2;)	値1が水平方向への指定、値2が垂直方向への指定となります。

背景サイズ：background-size

background-sizeプロパティは、背景のサイズの指定ができます。

デフォルトはbackground-size: auto;と同様の設定で画像そのままのサイズとなります。

background-imageが適用対象

background-imageの背景画像だけが反映されます。
background-colorの背景色には反映されません。

【コードの例で使用する画像】

【 test.css 】


.block {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    background-image: url(../img/cojihana-logo.png);
}
.bg-sz-contain {
    background-size: contain;
}
.bg-sz-cover {
    background-size: cover;
}
.bg-sz-no-auto {
    background-size: auto;
}
.bg-sz-80px {
    background-size: 80px;
}
.bg-sz-80px-100pst {
    background-size: 80px 100%;
}

.block02 {
    width: 150px;
    height: 100px;
    border: 1px solid black;
    background-image:
        url(../img/cojihana-logo.png),
        url(../img/frame.png);
}
.bg-sz-2img {
    background-size: 80px, cover;
}

【 HTMLファイル】


<div class="block bg-sz-contain">contain</div>
<br>
<div class="block bg-sz-cover">cover</div>
<br>
<div class="block bg-sz-no-auto">auto</div>
<br>
<div class="block bg-sz-80px">80px</div>
<br>
<div class="block bg-sz-80px-100pst">80px 100%</div>
<br>
<div class="block02 bg-sz-2img">2img<br>80px, cover</div>

ブラウザで実行するとこんな感じです。

background-sizeに指定した値によって画像の表示が変わりました。

background-sizeの値について説明

contain	背景画像が要素内に収まる最大の大きさになります。
cover	背景画像が要素を隙間なく覆う設定です。要素の縦横比が画像と異なる場合、見切れます。
auto	背景画像をそのままのサイズで表示する指定です。 background-sizeを指定していない場合、デフォルトで設定されます。
サイズ指定	背景画像の縦横サイズを一括で指定できます。例）background-size: 80px;
サイズ指定 (値1 値2;)	背景画像に対して値1を横幅のサイズ、値2を高さのサイズとして指定できます。スペース" "区切りで指定します。例）background-size: 80px 100%;
複数の背景用 (値1, 値2, ...;)	複数の背景画像がある場合、値1を1つ目の背景、値2を2つ目の背景（以降続く）に対して指定できます。カンマ","区切りで指定します。例）background-size: 80px, cover;

まとめ

CSSでの背景設定については、色/画像/繰り返し/サイズ/位置/スクロール時の位置/表示範囲/表示の開始位置を指定できる。
background-colorプロパティ：背景の色を設定できる。
background-imageプロパティ：背景の画像を設定でき、値にurl()で画像ファイルのパスを指定する。
background-repeatプロパティ：背景の繰り返しの設定ができ、値にno-repeat/repeat/repeat-x/repeat-y/space/roundが指定できる。
デフォルトはbackground-repeat: repeat;で繰り返しになる。
background-sizeプロパティ：背景のサイズの設定ができ、値にcontain/cover/auto/サイズが指定できる。
デフォルトはbackground-size: auto;となる。

【 2025/04/29 21:05 更新】

こじはな

Webエンジニア3年目。

フロントからバックエンドまで幅広く経験や知識を発信します！