JINMUSOFTWARE

JINMUSOFTWARE

Background-Sizeを設定して背景を模様のように繰り返し表示する方法

公開日: / 最終更新日: / カテゴリ: CSS / 投稿者: yoshida

背景画像のサイズを定義します。区切りを与えます。

background-sizeとは

背景画像をアスペクト比を維持しながらfitな表示をしたり、小さく表示して敷き詰めるように表示できたりします。

Options：

  • contain
  • cover
  • auto
  • %
  • px

background-size: size;

background-imageのサイズを指定します。

コンテナのdivは300x300pxですが、1つの背景のサイズは55pxです。

.box2 {
    width: 300px;
    height: 300px;
    background-image: url("./100x100.png");
    background-size: 55px 55px;
}

わお！たくさん表示されましたね。

ちなみに何も指定しない場合はこうです。

100pxの画像がタイルのように敷き詰められましたね。

ちなみに、背景ですので画像の前にテキストとか表示できます。

Hello！

background-size: cover;

画像が拡縮して隙間なくカバーされる感じです。ただし見切れる可能性あります。

サイズ比率がcontainerとimageが同じであれば、アスペクト比が同じであるので、拡縮する可能性があるものの、ピッタリと画像が表示されます。欠損無。

.box3 {
    width: 200px;
    height: 300px;
    background-image: url("./100x100.png");
    background-size: cover;
}

background-size: contain;

画像がすべて欠損なく表示されます。隙間がある場合は繰り返し表示されます。

no-repeatを指定しない限り、繰り返し表示されます。

.box4 {
    width: 200px;
    height: 300px;
    background-image: url("./100x100.png");
    background-size: contain;
    /* background-repeat: no-repeat; */
}

background-repeat: no-repeat; を指定してみました。繰り返しが止まりましたね。

Background-Sizeの複数イメージの対応

そーいえば、background-imageは、複数のImageを使用できますよね。

それに合わせて、background-sizeも複数のImageに対応可能です。カンマで区切って指定します。

.box5 {
    width: 200px;
    height: 200px;
    background-image: url("https://www.jinmusoftware.com/wp-content/uploads/2022/08/icon-192.png"), url("https://www.jinmusoftware.com/wp-content/uploads/2022/11/100x100_6.png");
    background-size: cover, 20%;
}

1番目の画像（”じ”）はcover、2番目の画像（100の文字）は20%、としました。

Background-Imageの画像を中央に表示する方法

<style>
.box6 {
  width: 300px;
  height: 300px;
  background-color: lightgray;
  background-image: url("./100x100.png");
  /*background-size: contain;*/
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

本題のbackground-sizeは関係なくなりましね。background-position: center center; が必要でした。

関連プロパティ

  • background-image
  • background-size
  • background-color
  • background-position
  • background-repeat

勉強中に気になったワード