backgroundで背景色や背景画像を設定する方法！

この記事では、backgroundプロパティを使って、背景色や背景画像を設定する方法を紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

背景色を設定するbackground-color

/* 使用例 */
.hoge {
    background-color: #ff0000;
}

background-colorプロパティでは背景色を設定できます。初期値はtransparentです。

主な取れる値

• カラー名
• 16進数
• 16進数 + 透明度
• RGB
• RGBA

他にもいくつかありますが、上の5つを覚えておけば良いです。

/* カラー名 */
background-color: red;

/* 16進数 */
background-color: #ff0000;
background-color: #f00;

/* 16進数 + 透明度(透明度は50%に設定) */
background-color: #ff000050;

/* RGB */
background-color: rgb(255, 0, 0);
background-color: rgb(100%, 0%, 0%);

/* RGBA(透明度は50%に設定) */
background-color: rgba(255, 0, 0, 0.5);

このように使います。

透明度50%の背景色にしたい場合は、color: #ff000050;やcolor: rgba(255, 0, 0, 0.5);のように書きます。

transparentの使用例

.hoge {
    background-color: red;
}
@media screen and (min-width: 500px) {
    .hoge {
        background-color: transparent;
    }
}

たまにbackground-color: transparent;も使うことがあります。例えば、上のコードのように、SP時は背景色あり、PC時は背景色なしにする場合などです。

背景画像を設定するbackground-image

/* 使用例(背景画像) */
.hoge {
    background-image: url(img/hoge.png);
}

background-imageプロパティでは背景画像やグラデーション背景を設定できます。初期値はnoneです。

背景画像が反映されない場合、ほとんどがスペルミスかパスの書き方が間違っているので、よく見直してみましょう。

背景画像と背景色の重なり順

.hoge {
    background-image: url(img/hoge.png);
    background-color: #eee;
}

このようにbackground-imageとbackground-colorが設定されている場合、background-imageが上になります。

画像に透明な部分がある場合は、背景色が見えます。

画像の読み込みが遅い場合や読み込みに失敗した場合のために、灰色などのbackground-colorを設定しておくと良いです。

グラデーションの背景を作る

/* 使用例(グラデーション背景) */
.hoge{
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

グラデーションの背景を作ることもできます。background-colorではなく、background-imageに設定する点に気をつけましょう。

CSSで背景をグラデーションにする方法を解説！

グラデーションに関しては、上の記事で詳しく紹介しています。

CSSで文字をグラデーションにする方法を解説！

海外のサイトでよく使われているような、文字のグラデーションに関して、上の記事で紹介しています。文字のグラデーションでもbackground-imageを使います。

グラデーションはジェネレーターを使うと、デザインに自信がない方でも良い感じになるのでオススメです。

背景画像は複数設定可能

.hoge {
    /* 背景画像 */
    background-image: url(../img/bird.svg), url(../img/bg.jpg);
}

このように画像をカンマ区切りにすることで、複数の背景画像を設定することができます。

重なり順は、前に書いたものほど手前に配置されます。つまり上のコードだと、上からbird.svg→bg.jpgの順で配置されます。

1枚の画像にせずに、複数画像にした方が良い場合もたまにあるので、覚えておきましょう。

background-imageで複数の背景画像を設定する方法を解説！

上の記事で具体的なメリットなども紹介しています。

背景画像の上に半透明なレイヤーを重ねる方法

.background {
    ...
    background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2)), url(../img/bg.jpg);
}

• グラデーションの背景
• 複数背景画像の設定

これらをうまく使うと、上の画像のように背景画像の上に半透明なレイヤーを重ねることもできます。

擬似要素を使ったテクニックがよく紹介されていますが、background-imageでやる方がコード量が減ります。また、他の用途で擬似要素が使いたくなる場合もあるので、今回の方法がオススメです。

基礎学習後...迷子になっていませんか？

Web制作業界を目指す方の多くが、基礎学習後にやるべきことがわからず、迷子状態になっています。あなたも下記のように感じていませんか？

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

そんな悩みを解決するために、模写修行やこのメディアを作ったエンジニア・デザイナー中心に、学習支援サービス 『Hello Mentor』 を運営しています。

転職成功者や副業・フリーランスデビューした方も出ています。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

背景画像の位置を設定するbackground-position

/* 使用例 */
.hoge{
    background-image: url(img/hoge.png);
    background-position: center;
}

background-positionプロパティでは背景画像の位置を設定できます。初期値は0% 0%です。

主な取れる値

background-position: bottom;
background-position: right;
background-position: center;

background-position: 50% 100%;

background-position: 20px 50px;

background-position: bottom 20px right 50px;

background-positionは少し注意が必要です。これ以降で紹介します。

positionと計算方法が違う

• background-positionの値
• position配置する際のtop / bottom / left / rightの値

上の2点は配置の基準が違います。中央に配置する場合を例に紹介します。

左の画像は、木の画像も鳥の画像もbackground-imageで入れています。右の画像は木の画像だけbackground-imageで鳥の画像はimgタグで入れてpositionで配置しています。

positionで配置する方法は赤い点が親要素に対して50%の位置に配置されます。

background-positionの場合は、親要素に対して何%の位置に配置するかを指定しているわけではありません。

例えば...

.background {
    ...
    width: 1000px;
    height: 500px;
    background-image: url(../img/bird.svg), url(../img/bg.jpg);
    background-position: 50% 50%, center; /* 👈 本当はcenter, center;で良い */
    background-size: 200px, cover;
}

※ 説明のために、鳥の画像の位置を50% 50%としていますが、本来centerとすれば良いです。

• 背景領域のwidthが1000px / heightが500px
• 鳥の画像のサイズが横200px / 縦200px
• background-position: 50% 50%, center;を指定

鳥の画像の横軸の位置 = ((背景領域のwidth) - (鳥の画像の横のサイズ)) × n%
= (1000px - 200px) × 50%
= 400px

縦軸の位置の計算も同じです。positionのように1000pxの50%で500pxの位置に配置されるわけではありません。

値を省略した場合

値を省略した場合も少しややこしいです。

.hoge{
    background-position: right;
    /* = top 50% right 0%;*/
    /* ✋ top 0% right 0%;ではない点に注意！ */
}

初期値が0% 0%なので、rightだけ指定した場合、top 0% right 0%になりそうですが、top 50% right 0%になります。

自分でコードを書く際は、混乱しないように、top 50% right 0%のように全て省略せずに書くと良いかもしれません。

複数画像が設定されている場合

.hoge{
    background-position: top 0 right 0, top 20px left 40px;
}

背景画像が複数設定されている場合は、他のプロパティもカンマ区切りで設定します。

背景画像のサイズを設定するbackground-size

/* 使用例 */
.hoge {
    background-size: cover;
}

background-sizeプロパティでは背景画像のサイズを設定できます。初期値はauto autoです。

主な取れる値

background-size: cover;
background-size: contain;

/* 値が1つだけの場合は幅のサイズ(高さはauto) */
background-size: 60%;
background-size: 30px;

/* 1つ目 = 幅のサイズ / 2つ目 = 高さのサイズ */
background-size: 30px 40px;

coverとcontainの使用頻度が高いです。パーセントを使った場合、背景領域全体に対して、何%かになります。

例えば、キービジュアルなど背景全面に画像を表示したい場合は、coverを使います。擬似要素でアイコンを表示する際など、一部分が切れてしまうといけない場合は、containを使います。

背景画像の繰り返し表示を設定するbackground-repeat

/* 使用例 */
.hoge {
    background-repeat: no-repeat;
}

background-repeatプロパティでは繰り返し表示を設定できます。初期値はrepeatです。

主な取れる値

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

他にも取れる値はありますが、no-repeatを使用することがほとんどです。

背景画像の原点を設定するbackground-origin

/* 使用例 */
.hoge {
    background-origin: border-box;
}

background-originプロパティでは原点を設定できます。初期値はpadding-boxです。

主な取れる値

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

背景画像の配置領域を設定するbackground-clip

/* 使用例 */
.hoge {
    background-clip: content-box;
}

background-clipプロパティでは配置領域を設定できます。初期値はborder-boxです。

主な取れる値

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

唯一使うのは、background-clip: text;です。

CSSで文字をグラデーションにする方法を解説！

前述した上の記事では、background-clip: text;を使って文字をグラデーションにしています。

背景画像の固定を設定するbackground-attachment

/* 使用例 */
.hoge {
    background-attachment: fixed;
}

background-attachmentプロパティでは背景画像を固定できます。固定がどんな挙動になるかは、上のCodePenを見ていただくとわかります。初期値はscrollです。

主な取れる値

background-attachment: scroll;
background-attachment: fixed;

iPhoneのSafariで使えないので、ほとんど使う機会がありません。

背景画像を固定パララックスにする場合は、background-attachmentではなく、JavaScriptのライブラリで実装すると良いです。

JavaScriptライブラリRellax.jsの使い方を解説！簡単にパララックスを実装しよう！

手軽にパララックスが実装できる、Rellax.jsを以前紹介しました。興味がある方は、そちらもご覧ください。

backgroundプロパティを使ってショートハンドでまとめて設定する方法

/* 使用例 */
.hoge {
    background: #eee url(img/hoge.png) center / cover;
}

backgroundプロパティでは、background-〇〇系のプロパティをまとめて指定できます。

わかりにくくなるので使わない方も多いような印象です。個人的にも使いません。

基礎学習後...迷子になっていませんか？