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

[CSS] backgroundで背景のプロパティをまとめて指定しよう!

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




1.backgroundとは?

backgroundプロパティは背景色、画像、繰り返し、位置などを一括で指定できるショートハンドです。

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

{ background: 値; }

値の指定方法

それぞれの値は半角スペースで区切って指定します。

指定の順序は問われておらず、必要のない指定は省略可能です。




2.backgroundの使い方

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

.background { 
 background: no-repeat center/80% url("image.png");
}

上記のようにすることで単一の画像を中央寄せかつ縮小させて表示させます。

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




コメントを残す

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