2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] background-sizeで背景画像の表示サイズを指定しよう!

background-sizeの評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.background-sizeとは?

background-sizeプロパティは背景画像の表示サイズを指定します。

カンマで区切って複数の画像サイズを指定できます。

値の指定方法は以下の通りです。

{ background-size: 値; }

値の指定方法

  • cover
  • contain
  • auto
  • 任意の数値+単位
  • %値




2.background-sizeの使い方

それではbackground-sizeの使い方をみていきましょう。

.background-img { 
 background-image: url(image.png); 
 background-size: contain;
 width: 100%;
 height: 300px;
}

上記のようにすることで背景画像を画面幅最大に設定することができます。

他にも値を設定できるのでいろいろと試してみることをお勧めします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です