Bakgrunnsstørrelse - CSS-triks

Anonim

Den background-sizeeiendom i CSS er en av de mest nyttige - og mest komplekse - av bakgrunnsegenskaper. Det er mange variasjoner og forskjellige syntakser du kan bruke for denne egenskapen, som alle har forskjellige bruksområder. Her er et grunnleggende eksempel:

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

Det er et eksempel på toverdisyntaks for bakgrunnsstørrelse. Det er fire forskjellige syntakser du kan bruke med denne egenskapen: nøkkelordssyntaks, enverdisyntaks, toverdisyntaks og flere bakgrunnssyntakser.

Nøkkelord

I tillegg til standardverdien ( auto), er det to nøkkelord du kan bruke med background-size: coverogcontain

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

I slekt

  • bakgrunn-vedlegg
  • bakgrunn-klipp
  • bakgrunnsfarge
  • bakgrunnsbilde
  • bakgrunn-opprinnelse
  • bakgrunn-posisjon
  • bakgrunn-gjenta

Flere ressurser

  • CSS3 spesifikasjon
  • MDN

Nettleserstøtte

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