模写修行メディア

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

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

初学者さん向けの記事ですが、少し以外?な仕様やbackground関連のTipsのリンクも記載しています。

背景色を設定するbackground-color

背景色を設定する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

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

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

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

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

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

このようにbackground-imagebackground-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でやる方がコード量が減ります。また、他の用途で擬似要素が使いたくなる場合もあるので、今回の方法がオススメです。

背景画像の位置を設定する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点は配置の基準が違います。中央に配置する場合を例に紹介します。

複数の背景画像と背景画像+imgタグ(position配置)の違い

左の画像は、木の画像も鳥の画像も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;を指定
background-positionの計算

鳥の画像の横軸の位置 = ((背景領域の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-color以外はカンマ区切りで複数設定することができます。

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

背景画像のサイズを設定する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;

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

特徴
cover画像のオリジナルの比率を保ちながら、背景領域を隙間なく埋める
contain画像のオリジナルの比率を保ちながら、背景領域に画像を全て表示する(見切れることがない)

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

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

背景画像の繰り返し表示を設定する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;
特徴
repeat横方向にも縦方向にもに繰り返す
repeat-x横方向にのみ繰り返す
repeat-y縦方向にのみ繰り返す
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-〇〇系のプロパティをまとめて指定できます。

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

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

模写修行ではデザインデータ(XD) / web上で見れる解説 / サンプルコードを配布しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで深く学ぶことができるサービスです。

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材