Baggrundsstørrelse - CSS-tricks

Anonim

Den background-sizeejendom i CSS er en af de mest nyttige - og mest komplekse - af baggrunden egenskaber. Der er mange variationer og forskellige syntakser, du kan bruge til denne egenskab, som alle har forskellige brugssager. Her er et grundlæggende eksempel:

html ( background: url(greatimage.jpg.webp); background-size: 300px 100px; )

Det er et eksempel på syntaks med to værdier for baggrundsstørrelse. Der er fire forskellige syntakser, du kan bruge med denne egenskab: nøgleordssyntaks, syntaks med én værdi, syntaks med to værdier og syntaks med flere baggrunde.

Nøgleord

Ud over standardværdien ( auto) er der to nøgleord, du kan bruge med background-size: coverogcontain

Se pennens baggrundsstørrelse af CSS-Tricks (@ css-tricks) på CodePen.

Relaterede

  • baggrund-vedhæftet fil
  • baggrund-klip
  • baggrundsfarve
  • baggrundsbillede
  • baggrund-oprindelse
  • baggrund-position
  • baggrund-gentagelse

Flere ressourcer

  • CSS3 Spec
  • MDN

Browsersupport

Chrome Safari Firefox Opera IE Android iOS
3+ 4.1+ 3.6+ 10+ 9+ 2.3+ 4.0+