2023年04月22日
【背景に詳しくなろう！】backgroundプロパティについて
Lesson4
HTML/CSS
Webデザインで必ずと言っていいほど使用するプロパティの一つであるbackgroundプロパティ。
Lesson4-4でも少し説明がありましたが、より詳しく知れるようにまとめてみました！
まず始めにbackgroundプロパティについて、要素の背景や画像を設定できるプロパティです。
【よく使用するbackgroundプロパティ一覧】
- background-color … 背景色を指定
- background-image … 背景画像を指定
- background-size … 背景のサイズを指定
- background-repeat … 背景の繰り返しを指定
- background-position … 背景の位置を指定
- background-attachment … 背景の固定を指定
- background-origin … 背景の配置基点を指定
- background-clip … 背景の拡張範囲を指定
特に上から5つ目までは使用頻度が高いかと思います。
値もそれぞれありますので、調べながら使用してみてください！
※background-imageの注意点
background-imageは、要素の高さに応じて表示範囲が変わります！
高さが指定されていないと、パスは通っているのに背景画像が表示されない！という現象が起きてしまいますので、必ず高さの指定をしましょう！
他にもプロパティは存在しますので、気になった方は調べてみてください！
参考url
https://jajaaan.co.jp/web-production/frontend/css-background/
さかい
コメントする
コメント（全0件）