【CSS】背景に画像やグラデーションを表示しよう!background属性の使い方(後編)

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

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

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

このカリキュラムは【CSS】背景に画像やグラデーションを表示しよう!background属性の使い方と意識する点について(前篇)の後編です。

背景画像の繰り返しを制御する(background-repeat属性)

初期値では、背景画像は要素の大きさを画像で満たすまで繰り返し表示されます。

背景の繰り返しを制御するbackground-repeat属性は、画像を縦方向や横方向に繰り返し表示するように設定したり、繰り返しをさせないように設定することができる属性です。

初期値はrepeat(繰り返し)が設定されています。

次の例で、50pxの正方形画像がbackground-repeat属性の値によってどのように表示されるかを確認してみましょう。

初期値(repeat


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
}
    

<div></div>
    

横方向への繰り返し(repeat-x


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: repeat-x; /* 横方向へ繰り返します */
}
    

<div></div>
    

縦方向への繰り返し(repeat-y


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: repeat-y; /* 縦方向へ繰り返します */
}
    

<div></div>
    

画像サイズを調整して繰り返し(round

初期値のrepeatと異なり、繰り返される画像の大きさが要素に収まるように伸縮します。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: round; /* 要素サイズに画像サイズを丸めながら繰り返します */
}
    

<div></div>
    

画像間に余白を設定して繰り返し(space

roundと異なり、繰り返される画像の大きさはそのままで、大きさの足りない部分は均等に余白を設定します。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: space; /* 画像間に余白を設定します */
}
    

<div></div>
    

繰り返しを止める(no-repeat


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: no-repeat; /* 繰り返しを止めます */
}
    

<div></div>
    

理解度チェック

  • background-repeatの初期値は何でしたか?
  • background-repeatの初期値は何でしたか?
  • background-repeatの値repeatroundの違いは何でしたか?
  • background-repeatの繰り返しを止める値は何でしたか?

背景画像の大きさを制御する(background-size属性)

background-size属性には、背景画像の大きさ(横幅、高さ)を指定します。

background-image属性に複数の画像が設定されている場合もそれぞれのサイズを指定することが可能です。

画像を要素に収まるように最大の大きさで表示するcontainや要素を覆うように画像を伸縮して表示するcoverなどの値があります。

画像を要素に収まるように最大の大きさで表示する(contain

要素の横幅もしくは高さのどちらかに内接するまで画像の大きさを伸縮します


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: contain;
}
    

<div></div>
    

background-repeat属性と併用した場合

background-repeat: repeat;(初期値)で、調整された画像サイズで要素が埋まるまで繰り返し表示されます。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    /* background-repeat: no-repeat; コメントアウトします */
    background-size: contain;
}
    

画像を覆うように画像を伸縮して表示する(cover

要素が画像で満たされるまで画像の大きさを伸縮して表示します
要素を覆うように表示されるため、background-repeat属性で繰り返し表示されることがありません。

画像より要素が大きい例

画像より要素の幅や高さが大きい場合は、画像が引き伸ばされて要素を覆うように表示します。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: cover;
}
    

<div></div>
    

画像より要素が小さい例

画像より要素が小さい場合は、画像が縮小され要素を覆うように表示します。


div {
    height: 175px;
    width: 175px;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: cover;
}
    

<div></div>
    

画像の横幅と高さを指定する

二つの値を空白(スペース)区切りで指定することで、画像の横幅と高さを調整できます。

左の値は横幅、右側の値が高さです。
省略した場合は、auto(縦横比を維持したまま自動的に拡大縮小される)が初期値で設定されます。
つまり、値を一つだけ指定した場合は高さがautoになります。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: 100px 100px;
}
    

<div></div>
    

autoを指定した場合(初期値)


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: auto;
}
    

<div></div>
    

理解度チェック

  • background-sizeの値containはどんな値でしたか?
  • background-sizeの値coverはどんな値でしたか?
  • background-sizeに横幅200px、高さ100pxを指定してみてください!

背景画像の位置を指定する(background-position属性)

background-position属性を使用すれば、背景画像の表示する位置を指定することができます。

キーワードで指定する

背景画像をtop(上、横中央)、right(右、縦中央)、bottom(下、横中央)、left(左、縦中央)のようなキーワードで指定することができます。

次の例ではtopを指定してみます。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top;
}
    

<div></div>
    

キーワードと値で指定する

キーワードに加え、値を指定することでより細かな位置を指定することができます。

値にはpxrem%などを使用します。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top 20px left 10%;
}
    

<div></div>
    

値で指定する

値でのみ指定する場合は、空白(スペース)区切りで、横軸(左から)と縦軸(上から)の位置をそれぞれ指定します。

次の例では、左から100px、上から15%を指定する例です。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/50/50');
    background-repeat: no-repeat;
    background-size: auto;
    background-position:  100px 15%;
}
    

<div></div>
    

background-size: cover;とキーワードを併用する

画像をbackground-size: cover;で要素を覆うように表示している場合にキーワード(と値)を指定すると、画像のどの部分を表示するかを調整することができます。


div {
    height: 175px;
    width: 100%;
    background-color: yellow;
    background-image: url('https://picsum.photos/200/200');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left 10% top 50%;
}
    

<div></div>
    

理解度チェック

  • background-positionの値に使用できるキーワードにはどんなものがありますか?
  • background-positionに下から20px、右から100pxの位置を指定してみてください!

(おまけ)background-clip属性を使用してグラデーション文字を作成しよう

background-clip属性は、背景画像の表示領域を指定する属性です。

指定できる値には、要素の境界線(border)以内、内側の余白(padding)以内、要素の内容以内、文字(text)があります。
表示領域というのは、背景画像が表示される領域を指定するという意味であり、画像の表示位置が変わったり画像が伸縮されるわけではありません。(背景画像そのものが表示される開始位置を決める属性には、background-origin属性があります。)

つまり、どの部分に背景画像を表示するかを指定できる属性です。

境界線や内側余白、内容については省略しますが、値にtextを指定すると文字に背景画像を表示することができるようになります。


div {
    height: 175px;
    width: 100%;
    background-image: radial-gradient(farthest-side circle at 20%, blue, violet, orange, yellow);
    background-clip: text;
    -webkit-background-clip: text; /* ChromeやSafariで必要です。 */
    color: transparent; /* 文字色を透過させます。 */
    font-size: 8rem;
    font-weight: bold;
}
    

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

背景画像を文字の部分のみ指定する箇所が、background-clip: text;-webkit-background-clip: text;です。
また、背景を文字に反映させるため、文字色をtransparent(透過)に指定しています。

理解度チェック

  • 文字をグラデーションで表示してみよう!

Twitterでアウトプット

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

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

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

学習仲間が増える

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

より深く理解する

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