【CSS】背景に画像やグラデーションを表示しよう!background属性の使い方と意識する点について(前篇)

CSSで背景を指定する属性はbackground属性です。
この属性を使用することで、背景に単色やグラデーションの色を付けたり、画像を表示させることができます。

背景は文字を強調させたり、画像と一緒に情報を伝達したりと重要な役割を担っています。

また、background属性は背景に関する指定を一度に行う属性であるため、背景の細かい属性をそれぞれ学習していきましょう。

背景に色を付ける(background-color属性)

background-color属性は背景に色を付ける属性で、値には色名や色コードを指定します。


span {
    background-color: orange;
}
    

<span>こんにちは</span>
    
こんにちは

結果の通り、色をorangeと指定することで、要素の背景色をオレンジ色にすることができます。
色に指定できる値は【CSS】文字の装飾!文字色の指定の仕方と最低限意識する点で学習した方法と同じです。

背景色も文字色と同様に見やすい色を心がける必要があります。

みにくい
みやすい

理解度チェック

  • 背景色を設定するにはどの属性にどんな値を指定しますか?
  • 背景色を指定する際に気をつけるべき点には何があるでしょうか?

背景画像を指定する(background-image属性)

background-image属性にはimage型という値を設定することができます

背景画像を使うにはurl()というimage型を返す関数に、画像のパス(URLなど)を指定します。


div {
    height: 200px;
    background-image: url('https://picsum.photos/200/200');
}
    

<div>
    こんにちは
</div>
    
こんにちは

url()に指定する絶対パスと相対パスについて

url()は画像のパスをimage型として返却する関数です。

このパスには画像の絶対パス(URL)または相対パスを指定します。

絶対パスと相対パス

絶対パスとは、http://https://で始まる画像のURLのことです。

相対パスとは、url()記述したファイルから画像までの経路を記述します。
同じ階層(フォルダ)にある場合は ./demo.jpg という風に先頭に ./ を使用します。(./は省略できますがVS Codeなどでは./とタイプすることで同一階層内のファイルの入力を補完してくれる機能があります。)
下の階層にある場合は、スラッシュ(/)を使用し、上の階層は../を使用します。

相対パスの書き方

ディレクトリの階層例

同じ階層にあるファイルのパスを指定する例

a.file から b.file を読み込む】

a.fileからb.fileまでの相対パスは、同じ階層にあるので./を使用し、 './b.file'となります。

下の階層にあるファイルのパスを指定する例

a.file から c.file を読み込む】

a.fileからc.fileまでの相対パスは、同じ階層demoフォルダの下の階層にあるので.//を使用し、 './demo/c.file'となります。

上の階層にあるファイルのパスを指定する例

d.file から b.file を読み込む】

d.fileからb.fileまでの相対パスは、上の階層にあるので../を使用し、 '../b.file'となります。

理解度チェック

  • 絶対パスはどんなものですか?
  • 画像のc.fileからa.fileを相対パスで読み込む場合はどのようになりますか?

背景画像を設定する要素の横幅と高さ

背景を表示する要素には横幅(width)と高さ(height)の設定が必要になります。

もし、div要素に背景画像を設定した場合で要素内に「こんにちは」という文字がある場合は、文字の大きさ分の高さとdisplay: block;による横幅100%が初期値で与えられるため初期値でも背景画像は表示されます。

しかし、要素内に何もない場合は横幅と高さを明示的に指定する必要があります。

要素の内容と高さをなしにした例

要素内が空で、高さも未設定だと横幅も高さも0pxとなり、表示されません。


div {
    /* height: 200px; コメントアウトします */
    background-image: url('https://picsum.photos/200/200');
}
    

<div>
    <! --こんにちは コメントアウトします -->
</div>
    

何も表示されません。

背景画像にグラデーションを使用する

url()以外のimage型を返却する関数に、グラデーション(線形: linear-gradient()、円形: radial-gradientなど)があります。
このグラデーション関数を使用することで背景にグラデーションを設定することができます。

線形グラデーション(linear-gradient()

linear-gradient()を値に使用すれば、線形グラデーションを複数の色で作成することができます。

引数には、方向(と長さ)を指定し、色は複数指定することができます。

次の例では、方向にto right(左から右へ)を指定し、色にbluevioletorangeyellowを指定しています。


div {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(to right, blue, violet, orange, yellow);
}
    

<div></div>
    

方向はto top(下から上)、to right(左から右)、to bottom(上から下)、to left(右から左)を指定でき、単位degを使用して角度を指定することもできます
また、色の横にスペースを空けて長さを(%pxremなどで)指定することができます

単位degを使用して角度を指定する

単位degを使えば角度を細かく指定できます。0degto topと同じで、180degto bottomと同じです。

次の例では、45度の角度で、グラデーションの始まりはblue、20%の地点でviolet、50%の地点でorangeになり、最終的にyellowになるように指定しています。


div {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(45deg, blue, violet 20%, orange 50%, yellow);
}
    

グラデーションさせない長さの指定方法

色の長さ指定を工夫することで、グラデーションしていないように見せることもできます。
次の例では、20%の地点までblueですが、20%の地点から50%の地点までvioletと指定しているので、グラデーションされません。


div {
    height: 175px;
    width: 100%;
    background-image: linear-gradient(45deg, blue 20%, violet 20% 50%, orange 50% 70%,  yellow 70%);
}
    

円形グラデーション(radial-gradient()

radial-gradient()を値に使用すれば、円形グラデーションを複数の色で作成することができます。

引数には、位置形状、終端の形状の大きさを表すキーワード(と長さ)を指定し、色は複数指定することができます。


div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(blue,  violet, orange,  yellow);
}
    

<div></div>
    

円の中心位置を指定する

位置は、円の中心地を指定します。初期値はcenter center(x軸、y軸共に中央: 50%)となります。

キーワードで指定する場合は、x軸にはleftcenterrightを、y軸にはtopcenterbottomを指定する事ができます。

left bottomと指定すると left 0 bottom 0 と同じ意味となり、左下が中心地となります。
キーワードと値を一緒に使用する場合は、left 20px top 100pxのように指定すると、左から20px上から100pxの位置が中心地となります。

次の例は、円の中心地を左から5%、上から25%に指定する例です。
キーワードのみまたは値のみを使用して位置を指定する場合には、先頭にatを用いる必要があり、最初の値はx軸、2番目の値はyです。x軸にしか値を設定しない場合、y軸の値は初期値のcenterが適用されます。


div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(at 5% 25%, blue, violet, orange, yellow);
}
    

円の形状を指定する

円の形状は、初期値でellipse(楕円)となっています。
これをcircle(真円)で指定した場合は次のようになります。

指定できる値はellipsecircleの2種類です。


div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(circle, blue, violet, orange, yellow);
}
    

円の終端の形状の大きさを指定する

終端の形状の大きさを表すキーワードは4種類あります。

初期値は、farthest-cornerです。

キーワード 説明
closest-side 形状がcircleの場合は、縦または横の辺の近い方に内接します。形状がellipseの場合は、 近い縦の辺と近い横の辺の両方に内接します。
closest-corner 最も近い角に接するように大きさが調整されます。
farthest-side closest-sideと同じですが、最も遠い辺に内接するように大きさが調整されます。
farthest-corner 初期値です。closest-cornerと同じですが、最も遠い角に接するように大きさが調整されます。
closest-sideについて

closest-sideは要素の辺の近い方に内接するように表示されます。
形状がcircleellipseで内接する辺が変わります。

形状がcircleの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(closest-side circle at 20%, blue, violet, orange, yellow);
}
    
形状がellipseの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(closest-side at 20%, blue, violet, orange, yellow);
}
    
closest-cornerについて

closest-cornerは要素の近い角に接するように大きさが調整されます。

形状がcircleの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(closest-corner circle at 20%, blue, violet, orange, yellow);
}
    
形状がellipseの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(closest-corner at 20%, blue, violet, orange, yellow);
}
    
farthest-sideについて

farthest-sideは要素の最も遠い辺に内接するように表示されます。

形状がcircleの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(farthest-side circle at 20%, blue, violet, orange, yellow);
}
    
形状がellipseの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(farthest-side at 20%, blue, violet, orange, yellow);
}
    
farthest-cornerについて

farthest-cornerは要素の最も遠い角に接するように大きさが調整されます。

形状がcircleの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(farthest-corner circle at 20%, blue, violet, orange, yellow);
}
    
形状がellipseの場合

div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(farthest-corner at 20%, blue, violet, orange, yellow);
}
    

反復グラデーション

グラデーションの色を繰り返し表示できる属性に反復グラデーション(repeating-linear-gradient()repeating-radial-gradient())があります。

反復する線形グラデーション

使い方はlinear-gradient属性とほぼ同じですが、繰り返しを行うためには、最後の色の長さを指定する必要があります

次の例は、violetyellow40pxずつ繰り返されるように指定しています。


div {
    height: 175px;
    width: 100%;
    background-image: repeating-linear-gradient(to right top, violet, violet 20px, yellow 20px, yellow 40px);
}
    

<div></div>
    

反復する円形グラデーション

こちらも使い方はradial-gradient属性とほぼ同じですが、繰り返しを行うためには、最後の色の長さを指定する必要があります

次の例は、真円(circle)でvioletyellow40pxずつ繰り返されるように指定しています。


div {
    height: 175px;
    width: 100%;
    background-image: repeating-radial-gradient(circle, violet, violet 20px, yellow 20px, yellow 40px);
}
    

<div></div>
    

理解度チェック

  • 背景画像にグラデーションを試してみましょう!

複数の背景画像を重ねて表示する

background-image属性は値をカンマ(,)区切りで複数指定することができます。

左側に指定した画像が右側に指定した画像よりも上に表示されます

次の例では、画像の上に透過グラデーションを表示するように設定しています。(グラデーションを透過させるためにrgbaで色を指定しています。)


div {
    height: 200px;
    width: 100%;
    background-color: yellow;
    background-image: linear-gradient(rgb(238, 130, 238, 0.8), rgb(238, 130, 238, 0.4)), url(https://picsum.photos/100/100);
}
    

<div></div>
    

理解度チェック

  • 背景画像に、画像とグラデーションを表示させてみましょう!

背景色、背景画像、要素の内容のレイヤー順序

background-color属性、background-image属性、要素の内容、これらの表示される階層(レイヤー)順序は決まっています。

次の画像で示すように、一番下の階層にはbackground-color属性があり、その次にbackground-image属性、一番上の階層に要素の内容が表示されます。

さらに、先述したbackground-image属性に複数の画像を指定した場合は、その中で階層順序が適用されます。


div {
    height: 200px;
    width: 100%;
    color: #fff; /* 要素内のテキストを白色に白色にします */
    background-color: yellow;
    background-image: linear-gradient(rgb(238, 130, 238, 0.8), rgb(238, 130, 238, 0.4)), url(https://picsum.photos/100/100);
}
    

<div>
    こんにちは
</div>
    
こんにちは

理解度チェック

  • 背景と内容のレイヤー順序について説明してください。

背景画像を設定した場合のbackground-color属性について

画像が表示されているので、背景色は隠れて見えないかもしれません。
そのため、background-color属性の設定は不要と思われるかもしれませんが、次の場合にはbackground-color属性に適切な色を設定するように心掛けましょう。

  • 要素内の色が背景色に近いテキストなどが存在する場合
  • background-image属性にグラデーションが使用されていない場合
  • background-image属性にグラデーションが使用されているが要素内のテキストの色と近い場合

簡潔に言うと、画像が表示されなかった場合にも文字が読めない可能性を考慮する必要があるということになります。

背景色を適切に指定した場合

こんにちは

背景色を指定しなかった場合

こんにちは

理解度チェック

  • なぜbackground-color属性の指定が必要になるのですか?説明してください。

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。