Bakgrundsstorlek - CSS-tricks

Anonim

Den background-sizeegendom i CSS är en av de mest användbara - och mest komplexa - av bakgrundsegenskaper. Det finns många variationer och olika syntaxer du kan använda för den här egenskapen, som alla har olika användningsfall. Här är ett grundläggande exempel:

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

Det är ett exempel på syntaxen med två värden för bakgrundsstorlek. Det finns fyra olika syntaxer som du kan använda med den här egenskapen: nyckelordssyntaxen, syntaxen med ett värde, syntaxen med två värden och syntaxen med flera bakgrunder.

Nyckelord

Förutom standardvärdet ( auto) finns det två nyckelord som du kan använda med background-size: coverochcontain

Se pennans bakgrundsstorlek av CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • bakgrundsbilaga
  • bakgrund-klipp
  • bakgrundsfärg
  • bakgrundsbild
  • bakgrund-ursprung
  • bakgrundsposition
  • bakgrund-upprepa

Fler resurser

  • CSS3 Spec
  • MDN

Webbläsarstöd

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