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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

背景色を設定する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でやる方がコード量が減ります。また、他の用途で擬似要素が使いたくなる場合もあるので、今回の方法がオススメです。

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

背景画像の位置を設定する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-〇〇系のプロパティをまとめて指定できます。

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

独学に限界を感じていませんか？