ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

背景を指定する!background-imageの使い方、一括、複数での書き方

背景を指定する!background-imageの使い方、一括、複数での書き方

「Webサイトに背景を指定したい」

「背景をイメージどおりに指定できない」

悩み

こんな悩みにお答えします。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

この記事では以下のことがわかります。

  • 背景画像を指定する方法
  • 背景画像を一括、複数、疑似要素で指定する方法
  • いろいろな背景例(ストライプ、チェック柄、ドット)
  • 表示されないときの対処法

記事を読み終えると、Webサイトでさまざまな背景を指定できるようになります。

目次
  1. 背景画像を指定する方法
    1. background-image (背景画像)
    2. background-color (背景色)
    3. background-repeat (背景の繰り返し)
    4. background-size (背景のサイズ)
    5. background-position (背景の位置)
    6. background-attachment (背景のスクロール時の表示方法)
    7. background-origin (背景の基準位置)
    8. background-clip (背景の描画領域)
    9. background-break (インライン要素の背景画像の繰り返し方法)
    10. background-blend-mode (背景の描画モード)
  2. 背景画像を一括、複数、疑似要素で指定する方法
    1. background 一括で指定する(ショートハンド)
    2. 複数指定する
    3. 疑似要素で指定する
  3. いろいろな背景例
    1. ストライプ
      1. linear-gradient
      2. repeating-linear-gradient
    2. チェック柄
    3. ドット
      1. radial-gradient
  4. 表示されないときの対処法
    1. CSSが読み込めているか
    2. 画像ファイルが読み込めているか
    3. 要素に高さがあるか
  5. まとめ

背景画像を指定する方法

background-image (背景画像)

背景の画像(gradient)を指定します。

imgタグとの違いはこちらの記事で解説しています。

画像はどっち?background-imageとimgタグの使い分け

HTMLコーディングのときにに画像の表示方法に悩んでいますか?この記事ではどのようにbackground-imageとimgタグを使い分ければいいか、実際にどんなところに使えばいいかを解説しています。ぜひご覧ください。

background-color (背景色)

背景の色を指定します。
background-imageの指定がなくても機能します。
背景画像が透過を含んでいれば画像の背景色として表示されます。

background-repeat (背景の繰り返し)

background-imageの繰り返す方法を指定します。
初期値は繰り返します。(repeat)

background-size (背景のサイズ)

background-imageのサイズを指定します。
初期値は画像そのままのサイズ(auto)で表示されます。
background-repeatで繰り返すとき以外は、レスポンシブにも対応できるように「contain」、「cover」を使うことが多いです。

background-position (背景の位置)

background-imageの位置を指定します。
初期値は左上(0 0)です。

background-attachment (背景のスクロール時の表示方法)

background-imageのスクロール時の表示方法を指定します。
初期値はブラウザのスクロールに合わせてスクロールしていきます。(scroll)
fixedを指定することでそのままの位置で固定表示され、簡易的なパララックスのような表示をすることができます。

ただし、iPhoneでfixedが効かないので、iPhoneでの挙動を無視できる場合をのぞいて使用できない状況です。

background-origin (背景の基準位置)

background-imageの基準位置を指定します。
初期値はpaddingを含む位置が基準になります。(padding-box)

あまり使うことがないです。

background-clip (背景の描画領域)

background-imageの描画領域を指定します。
初期値はborder、paddingを含むエリアが背景に含まれます。(border-box)

あまり使うことがないです。

background-break (インライン要素の背景画像の繰り返し方法)

あまり使うことがないです。

現状、Firefoxでしか使えないようです。

background(一括指定)では使えません。

background-blend-mode (背景の描画モード)

背景が重なるときの描画モードを指定します。
初期値は合成しません。(normal)

乗算とかオーバーレイとかが使えるのでかなり便利なのですが、IEでは使えないので、IEを無視できる案件でない限り、使うことができません。

background(一括指定)では使えません。

背景画像を一括、複数、疑似要素で指定する方法

background 一括で指定する(ショートハンド)

「background」で一括指定するには、個別の指定を半角スペースで区切って指定します。
「background-size」だけは前に「/」が必要です。

ショートハンドの書き方(初期値なので実際に書く必要はないです。)

background: none transparent repeat 0 0 / auto scroll padding-box border-box;

上のショートハンドを個別に指定すると

background-image: none;
background-color: transparent;
background-repeat: repeat;
background-size: auto;
background-position: 0 0;
background-attachment: scroll;
background-origin: padding-box;
background-clip: border-box;

複数指定する

背景画像は、カンマ(,)区切りで複数かさねることができます。

background:
  url(./img/bg1.png) left top / 100px 100px ,
  url(./img/bg2.png) right bottom / 100px 100px;
background-image: url(./img/bg1.png), url(./img/bg2.png);
background-position: left top, right bottom;
background-size: 100px 100px, 100px 100px;

ショートハンドでも個別指定でもできますが、レスポンシブで部分的に上書きするときには全部を書く必要があります。

疑似要素で指定する

疑似要素についてはこちらの記事で解説しています。

【CSS】疑似要素(:before、:after)とは?よくあるミス、使い方

コーディングで使う疑似要素について知りたいですか?この記事では疑似要素についての解説、よくあるミスについて、おもな使い方(アイコン、図形、装飾、連番)について紹介しています。ぜひご覧ください。

いろいろな背景例

  • ストライプ
  • ドット
  • いろいろな背景例
  • 表示されないときの対処法

ストライプ

ストライプをつくるには、linear-gradientとrepeating-linear-gradientの2つの方法があります。
どちらもほぼ同じです。

linear-gradient

linear-gradientで指定する場合は、background-sizeを指定しその中で繰り返すストライプをつくります。
そのストライプをbackground-repeatで繰り返すことになります。
background-repeatは初期値がrepeatなのでno-repeatが指定されていなければ繰り返しされます。
繰り返しの間隔は相対値(%)で指定したほうがサイズの変更があったときにサイズの変更だけで対応することができます。

See the Pen ストライプ linear-gradient by hashi84 (@hashi84) on CodePen.

repeating-linear-gradient

repeating-linear-gradientで指定する場合は、background-sizeがなくても自動的に繰り返しされます。
linear-gradientと違い、繰り返しの間隔は絶対値(px)で指定します。
background-sizeやbackground-repeatは関係なく要素内で繰り返し表示されます。

See the Pen ストライプ repeating-linear-gradient by hashi84 (@hashi84) on CodePen.

チェック柄

縦横のストライプを2つ重ねるとチェック柄になります。
色はRGBではなくCMYKで指定すると透過する色になるので重なる部分の色が濃くなります。

See the Pen チェック柄 by hashi84 (@hashi84) on CodePen.

ドット

ドットをつくるには、radial-gradientとrepeating-radial-gradientの2つの方法があります。
どちらもほぼ同じです。

radial-gradient

radial-gradientで指定する場合は、background-sizeを指定しその中で繰り返すドットをつくります。
そのドットをbackground-repeatで繰り返すことになります。
background-repeatは初期値がrepeatなのでno-repeatが指定されていなければ繰り返しされます。
繰り返しの間隔は相対値(%)で指定したほうがサイズの変更があったときにサイズの変更だけで対応することができます。

See the Pen ドット radial-gradient by hashi84 (@hashi84) on CodePen.

表示されないときの対処法

  • CSSが読み込めているか
  • パスが間違っていないか
  • 要素に高さがあるか

CSSが読み込めているか

CSSファイルの読み込めているでしょうか?
ファイル名の入力ミス、相対パスなら「./」「../」の間違いはないか再確認してみてください。

画像ファイルが読み込めているか

CSSファイル内で画像ファイルが読み込めているでしょうか?
ファイル名の入力ミス、相対パスなら「./」「../」の間違いはないか再確認してみてください。

要素に高さがあるか

要素にテキストや画像(img)などがないタグは高さがありません。
高さがないものには表示する場所がないので背景(background)の指定が間違っていなくても表示されないということになってしまいます。

heightやmin-heightで高さを指定する必要があります。

まとめ

背景(background)の使い方について解説しました。

  • 背景画像を個別に指定する方法
  • 背景画像を一括で指定する方法
  • 背景画像を複数指定する方法
  • 背景画像を疑似要素で指定する方法
  • 背景例(ストライプ)
  • 背景例(チェック柄)
  • 背景例(ドット)
  • 表示されないときの対処法

以下のサイトを参考にしました。

background(背景プロパティの一括指定)|Background - 背景|スタイルシート(CSS)|PHP & JavaScript Room

スタイルシートをプロパティ別に、コピペで使える実用的なサンプル付きで解説。 floatプロパティを使ったサイトレイアウト、リストメニュー、角丸テーブルなど、サイト制作に役立つスタイルシートを使った小技も紹介。