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

【 2025/05/01 19:29 更新】

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

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

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

本記事は背景関係プロパティの上級者編だよ！
background-position,background-attachment,background-clip,background-originについて説明するね！

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

背景画像の位置：background-position

background-positionプロパティは背景画像の位置を指定できます。

【位置の基準】

デフォルトの基準は自身の要素の左上です。（厳密には後述する"background-origin"の開始位置）
後述するbackground-attachmentに"fixed"が指定されている場合は画面左上(ビューポート)が基準になります。

background-imageが適用対象

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

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

【 test.css 】


.block {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-image: url(../img/cojihana-logo.png);
    background-repeat: no-repeat;
}
.bg-position-top {
    background-position: top;
}
.bg-position-bottom {
    background-position: bottom;
}
.bg-position-left {
    background-position: left;
}
.bg-position-right {
    background-position: right;
}
.bg-position-center {
    background-position: center;
}
.bg-position-30px {
    background-position: 30px;
}
.bg-position-30px-20px {
    background-position: 30px 20px;
}
.bg-position-b30px-r20px {
    background-position: bottom 30px right 20px;
}

.block02 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-image:
        url(../img/cojihana-logo.png),
        url(../img/frame.png);
    background-repeat: no-repeat;
}
.bg-position-2img {
    background-position:
        left,
        bottom 10px right 20px;
}

【 HTMLファイル】


<div class="block bg-position-top">top</div>
<br>
<div class="block bg-position-bottom">bottom</div>
<br>
<div class="block bg-position-left">left</div>
<br>
<div class="block bg-position-right">right</div>
<br>
<div class="block bg-position-center">center</div>
<br>
<div class="block bg-position-30px">30px</div>
<br>
<div class="block bg-position-30px-20px">30px 20px</div>
<br>
<div class="block bg-position-b30px-r20px">bottom 30px right 20px</div>
<br>
<div class="block02 bg-position-2img"><2img><br>left, <br>bottom 10px right 20px</div>

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

background-positionに指定した値によって画像の位置が変わりました。

background-positionの値について説明

【方向指定して配置】

top	背景画像の位置が要素の一番上に配置されます。 topのみ指定した場合水平方向は中央となります。
bottom	背景画像の位置が要素の一番下に配置されます。 bottomのみ指定した場合水平方向は中央となります。
left	背景画像の位置が要素の一番左に配置されます。 leftのみ指定した場合垂直方向は中央となります。
right	背景画像の位置が要素の一番右に配置されます。 rightのみ指定した場合垂直方向は中央となります。
center	背景画像の位置が要素の縦横の中央に配置されます。

【複数の背景用】

複数の背景用 (値1, 値2, ...;)	複数の背景画像がある場合、値1を1つ目の背景、値2を2つ目の背景（以降続く）に対して設定できます。カンマ","区切りで指定します。例）background-position: 　　left, 　　bottom 10px right 20px;

【サイズ指定】

サイズ指定 (値)
サイズ値1つだけの場合、背景画像の位置に対してleft(左)の位置を指定できます。垂直方向は中央となります。例）background-position: 30px;
サイズ指定 (位置1 値1 位置2 値2;)
背景画像の位置に対して値1に左からの位置(left)、値2に上からの位置(top)を指定します。位置1：top(上)/bottom(下)/left(左)/right(右)いずれかの方向を指定します。 leftの場合は省略可能です。値1 　：位置1で指定した方向からの位置を指定します。位置2：top(上)/bottom(下)/left(左)/right(右)いずれかの位置を指定します。 topの場合は省略可能です。値2 　：位置2で指定した方向からの位置を指定します。例1）background-position: 30px 20px; 例2）background-position: bottom 30px right 20px;

サイズ指定
(値)

サイズ値1つだけの場合、背景画像の位置に対してleft(左)の位置を指定できます。
垂直方向は中央となります。
例）background-position: 30px;

サイズ指定
(位置1 値1 位置2 値2;)

背景画像の位置に対して値1に左からの位置(left)、値2に上からの位置(top)を指定します。

位置1：top(上)/bottom(下)/left(左)/right(右)いずれかの方向を指定します。 leftの場合は省略可能です。
値1 　：位置1で指定した方向からの位置を指定します。
位置2：top(上)/bottom(下)/left(左)/right(右)いずれかの位置を指定します。 topの場合は省略可能です。
値2 　：位置2で指定した方向からの位置を指定します。

例1）background-position: 30px 20px;
例2）background-position: bottom 30px right 20px;

スクロール時位置：background-attachment

background-attachmentプロパティは背景画像のスクロール時に追従するかどうかを指定できます。

値は後述するlocal/scroll/fixedのいずれかを指定でき、デフォルトはスクロール時一緒に追従するscrollです。

background-imageが適用対象

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

positionプロパティfixed/stickyとの違い

スクロール時の位置を指定できる"position"プロパティがあり、background-attachmentと似ているように思えます。
background-attachmentは背景画像のスクロール時の挙動です。
一方でpositionは要素自体の位置決めをするプロパティです。

【 positionに関する記事】
CSSのpositionとは？positionを使った自由な位置の指定方法を解説！ | こじはなNote

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

【 test.css 】


.inner {
    width: 100%;
    height: 500px;
    background-color: rgba(0, 255, 255, 0.361);
}

.block {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-image: url(../img/cojihana-logo.png);
    overflow: scroll;
}
.bg-attachment-local {
    background-attachment: local;
}
.bg-attachment-scroll {
    background-attachment: scroll;
}
.bg-attachment-fixed {
    background-attachment: fixed;
}

.block02 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    background-image:
        url(../img/cojihana-logo.png),
        url(../img/frame.png);
    overflow: scroll;
}
.bg-attachment-2img {
    background-attachment:
        scroll,
        local;
}

【 HTMLファイル】


<div class="block bg-attachment-local">
    local
    <div class="inner">中の要素</div>
</div>
<br>
<div class="block bg-attachment-scroll">
    scroll
    <div class="inner">中の要素</div>
</div>
<br>
<div class="block bg-attachment-fixed">
    fixed
    <div class="inner">中の要素</div>
</div>
<br>
<div class="block02 bg-attachment-2img"><2img><br>scroll, <br>local
    <div class="inner">中の要素</div>
</div>

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

実際にそれぞれスクロールしてみてください！

background-attachmentの値によって、背景画像におけるスクロール時の挙動が変わりました。

background-attachmentの値について説明

local	要素スクロール時、背景画像は要素の中身と一緒にスクロールされます。
scroll	要素スクロール時、背景画像も一緒に追従します。基準は自身の要素（厳密には後述するbackground-origin）です。特に指定していなければデフォルトとなります。
fixed	要素スクロール時、背景画像も一緒に追従します。基準は画面の左上(ビューポート)です。
複数の背景用 (値1, 値2, ...;)	複数の背景画像がある場合、値1を1つ目の背景、値2を2つ目の背景（以降続く）に対して設定できます。カンマ","区切りで指定します。例）background-attachment: 　　scroll, 　　local;

表示範囲(切り抜き)の設定：background-clip

background-clipプロパティは背景の表示範囲(切り抜き)の設定ができます。

値は後述するborder-box/padding-box/content-box/textのいずれか指定でき、ます。

デフォルトはborder-boxと同様の設定で背景の表示範囲がborder(枠線)の部分までの範囲となります。

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

【 test.css 】


.block {
    width: 150px;
    height: 100px;
    background-color: rgb(183, 0, 255);
    /* 枠線を透かせたいので、ドットの枠線 */
    border: 10px dotted black;
    /* padding(内部余白) */
    padding: 20px;

    font-weight: bold;
    font-size: 30px;
    background-image: url(../img/cojihana-logo.png);
}
.bg-clip-border-box {
    background-clip: border-box;
}
.bg-clip-padding-box {
    background-clip: padding-box;
}
.bg-clip-content-box {
    background-clip: content-box;
}
.bg-clip-text {
    /* 文字色を透明化 */
    color: transparent;

    background-clip: text;
}

【 HTMLファイル】


<div class="block bg-clip-border-box">border-box</div>
<br>
<div class="block bg-clip-padding-box">padding-box</div>
<br>
<div class="block bg-clip-content-box">content-box</div>
<br>
<div class="block bg-clip-text">text</div>

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

background-clipに指定した値によって背景の表示範囲が変わりました。

background-clipの値について説明

border-box	背景の表示範囲がborder(枠線)の部分までとなります。デフォルトの設定です。【 border(枠線)について】プロパティ：border \| こじはなNote
padding-box	背景の表示範囲がpadding(内部余白)の部分までとなります。【 padding(内部余白)について】プロパティ：padding \| こじはなNote
content-box	背景の表示範囲が要素の中身の部分となります。 border(枠線)・padding(内部余白)を差し引いた範囲です。
text	背景の表示範囲が要素内の文字となります。また、文字色を透明color: transparent;に設定しなければ背景が見えません。

背景画像の表示開始位置を設定：background-origin

background-originプロパティは背景画像の表示する開始位置を指定できます。

値は後述するborder-box/padding-box/content-boxのいずれか指定できます。

デフォルトはborder-boxと同様の設定で背景の表示開始位置がborder(枠線)の左上までの位置となります。

background-imageが適用対象

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

他background関連プロパティに影響

background-originプロパティの設定はbackground-positionプロパティ・"background-attachment: scroll;"の基準となります。

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

【 test.css 】


.block {
    width: 150px;
    height: 100px;
    background-color: rgb(183, 0, 255);
    background-repeat: no-repeat;
    /* 枠線を透かせたいので、ドットの枠線 */
    border: 10px dotted black;
    /* padding(内部余白) */
    padding: 20px;

    font-weight: bold;
    font-size: 30px;
    background-image: url(../img/cojihana-logo.png);
}
.bg-origin-border-box {
    background-origin: border-box;
}
.bg-origin-padding-box {
    background-origin: padding-box;
}
.bg-origin-content-box {
    background-origin: content-box;
}

【 HTMLファイル】


<div class="block bg-origin-border-box">border-box</div>
<br>
<div class="block bg-origin-padding-box">padding-box</div>
<br>
<div class="block bg-origin-content-box">content-box</div>

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

background-originに指定した値によって背景画像の開始位置が変わりました。

background-originの値について説明

border-box	背景画像の表示開始位置がborder(枠線)の左上となります。デフォルトの設定です。【 border(枠線)について】プロパティ：border \| こじはなNote
padding-box	背景画像の表示開始位置がpadding(内部余白)の左上となります。【 padding(内部余白)について】プロパティ：padding \| こじはなNote
content-box	背景画像の表示開始位置が要素の中身の左上となります。 border(枠線)・padding(内部余白)を差し引いた範囲の左上です。

border-box

背景画像の表示開始位置がborder(枠線)の左上となります。
デフォルトの設定です。

【 border(枠線)について】
プロパティ：border | こじはなNote

padding-box

背景画像の表示開始位置がpadding(内部余白)の左上となります。

【 padding(内部余白)について】
プロパティ：padding | こじはなNote

content-box

背景画像の表示開始位置が要素の中身の左上となります。
border(枠線)・padding(内部余白)を差し引いた範囲の左上です。

まとめ

CSSでの背景設定については、色/画像/繰り返し/サイズ/位置/スクロール時の位置/表示範囲/表示の開始位置を指定できる。
background-positionプロパティ：背景画像の位置を指定できる。
background-positionの基準は、自身の要素の左上（厳密には後述する"background-origin"の開始位置）で、background-attachmentに"fixed"が指定されている場合は画面左上(ビューポート)が基準になる。
background-attachmentプロパティ：背景画像のスクロール時に追従するかどうかを設定でき、値はlocal/scroll/fixedのいずれかを指定できる。
デフォルトはスクロール時一緒に追従するscroll。
background-clipプロパティ：背景の表示範囲(切り抜き)の設定ができ、値にborder-box/padding-box/content-box/textのいずれかを指定できる。
デフォルトはborder-boxと同様の設定で背景の表示範囲がborder(枠線)の部分までの表示範囲となる。
background-originプロパティ：背景画像の表示する開始位置を指定でき、値にborder-box/padding-box/content-boxのいずれかを指定できる。
デフォルトはborder-boxと同様の設定で背景の表示開始位置がborder(枠線)の左上の位置となる。

【 2025/05/01 19:29 更新】

こじはな

Webエンジニア3年目。

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