【全部知ってる？】background-imageでできるCSSの背景操作全て説明

WEBサイトは良い画像が使われているかで、デザインの良し悪しがかなり左右されます。

今回は、基本的な画像の操作から高度な表示までできる"background-image"について説明します。

background-imageプロパティ

background-imageは、プロパティ名の通り背景画像を設定できるほかに、linear-gradientやradial-gradientのようなグラデーションを設定することができます。

まずは画像を表示してみます。

.bg-image
{
  background-image: url("./myIcon.jpg");
}

このままだとサイズや位置が設定されていないので何がなんだかわかりませんね。画像の設定をしていきます。

画像の大きさ

background-sizeプロパティで背景画像の大きさを設定することができます。

background-sizeは、「cover」と「contain」という2つのキーが設定されているほか、数値としてサイズを設定することもできます。

.bg-image-1
{
  background-size: contain;
}
.bg-image-2
{
  background-size: cover;
}
.bg-image-3
{
  background-size: 50px auto;
}

デザインによってそれぞれ使い道がありますが、実際にサイトを作る上では一番coverを使う機会が多いです。

画像の繰り返し

background-repeatプロパティは背景の繰り返し表示を設定できます。

値は以下の4種類があります。

プロパティはスペース区切りで横繰り返しと縦繰り返し個別で設定できます。

.bg-image-1
{
  background-size: 50px auto;
  background-repeat: no-repeat;
}
.bg-image-2
{
  background-size: 50px auto;
  background-repeat: space;
}
.bg-image-3
{
  background-size: 50px auto;
  background-repeat: round;
}
.bg-image-4
{
  background-size: 50px auto;
  background-repeat: no-repeat round;
}

roundは画像が変形されてしまうので使い道が難しいですね。spaceも最近のWEBサイトでは使い道が限られてくると思います。

画像の位置

background-positionプロパティを使うことで画像の位置を設定することができます。

top、bottom、left、right、centerの値を使って要素の上下左右中央に設定することができます。2つ指定することもできます。

.bg-image-1
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: left;
}
.bg-image-2
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: center;
}
.bg-image-3
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: top left;
}
.bg-image-4
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: center right;
}

数値を使って好きなところに配置することもできます。数値は指定方法がいくつかあります。

.bg-image-1
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: 20%;
}
.bg-image-2
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: 10px 80%;
}
.bg-image-3
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  background-position: right 10% center;
}
@keyframes bgPos
{
  0%{ background-position: 50% 0%; }
  25%{ background-position: 0% 50%; }
  50%{ background-position: 50% 100%; }
  75%{ background-position: 100% 50%; }
  100%{ background-position: 50% 0%; }
}
.bg-image-4
{
  background-size: 50px auto;
  background-repeat: no-repeat;
  animation: bgPos 5s infinite linear;
}

このように任意の位置に画像を配置することができます。animationやtransitionを使って動かすことも可能です。

グラデーションを追加する

background-imageプロパティで表示できるグラデーションは以下の3種類あります。

radial-gradientとconic-gradientの違いが文字ではわかりにくいので早速例をみてみます。

.bg-image-1
{
  background-image: linear-gradient( red, blue, green, red );
}
.bg-image-2
{
  background-image: radial-gradient( red, blue, green, red );
}
.bg-image-3
{
  background-image: conic-gradient( red, blue, green, red );
}

同じ円形グラディーションですが、グラディーションの向きが違うことがわかると思います。

これらはrepeating-の接頭辞をつけて、グラデーションを繰り返しにすることができます。repeating-グラディーションではグラディーションの幅を設定することができ、その幅を要素いっぱいまで繰り返します。

こちらもわかりにくいので例を見ていきます。

.bg-image-1
{
  background-image: repeating-linear-gradient( red, blue 20px );
}
.bg-image-2
{
  background-image: repeating-radial-gradient( red, blue 20px );
}
.bg-image-3
{
  background-image: repeating-conic-gradient( red, blue 20deg );
}

repeating-conic-gradientは角度によって幅を決めるので、pxではなくdegの単位で指定する必要があります。幅は%で指定することもできます。

世の中にはグラデーションを生成するジェネレーターを公開してくださっている方が多くいます。「CSS グラディーション ジェネレータ」で検索すると簡単にコードを作ることができます。

モダンデザインができる画像操作

いくつかの画像操作を紹介してきました。今までbackground-imageで一つだけの画像を表示しましたが、カンマ区切りでurlやgradientを指定することで複数個の背景を表示することができます。

画像を操作するプロパティも同じくカンマ区切りで指定することで、background-imageに指定したものを個別で表示を分けることができます。

試しに少し例を見てみます。

複数の画像を指定する

.bg-image-mult
{
  background-image   : url("./hot.png") , url("./myIcon.jpg");
  background-size    : 50% auto         , cover;
  background-position: bottom           , center;
  background-repeat  : no-repeat;
}

このように重ねて表示することができます。先に指定したほうが手前に表示されます。

多機能でオシャレな画像操作プロパティ

紹介したほかにもまだ使えるプロパティが用意されています。現在どのブラウザでも（IEはもう除きます）使える面白いプロパティは以下の3種類です。

個々の機能はシンプルなものではありますが、組み合わせるととてもオシャレなデザインをすることができます。それぞれの機能については、ぜひMDNなどで調べてみてください。

今回は組み合わせてできる面白いデザインについて紹介します。

画像操作を使った応用デザイン

先ほど紹介した通り、background-imageは複数指定することができます。それを指定方法を工夫することでとても面白いデザインを作ることができます。

低画質の画像をおしゃれに

先ほどから使っているアイコンを低画質にしました。

background-imageを少し活用することで、画質の低い画像をおしゃれにするテクニックです。

.bg-image-low
{
  background-image: repeating-linear-gradient(
    black, black 3px,
    rgba(255, 255, 255, 0.1) 3px, rgba(255, 255, 255, 0.1) 5px),
    url('./myIcon-150x150.jpg' );
  background-size: cover;
  background-blend-mode: darken;
}

ストライプを上にあてると少しデジタルなイメージのデザインに見えます。ブラーとは少し違うイメージを与えられると思います。

スケルトンローダー

スケルトンローダーとは画像や文字が読み込み中だということを示すローディングアニメーションの一つです。YouTubeの一覧ページにも採用されています。

読み込み中のカードはこのようなデザインのことですね。

このデザインにスケルトンローダーを適用すると

このようになります。

background-attachmentプロパティを適用することでこのローディングアニメーションを簡単に作れます。

@keyframes skeleton 
{
  to { background-position: -200% 0; }
}
.skeletonLoad
{
  background-image: linear-gradient(
    -75deg,transparent, transparent 30%,
    #f0f0f0 50%, transparent 70%,
    transparent 100%);
  background-position: 0;
  background-size: 200% 100%;
  background-attachment: fixed;
  animation: skeleton 1s infinite linear;
}

このコードをコピペしてskeletonLoadというクラス名を追加するだけで簡単に実装することができます。

まとめ

今回は背景画像を表示するbackground-imageの基本的な使い方と、その画像操作による応用テクニックを紹介しました。

background-attachiment: text;とbackground-blend-modeの組み合わせによるデザインテクニックについても紹介予定でしたが、メジャーブラウザであるChromeとSafariで思った通りの挙動をしなかったので没になりました。残念。

今後もbackground-imageを使っている良いデザインを見つけましたら、この記事を更新していきますので、ご期待ください！