Achtergrondgrootte - CSS-trucs

Anonim

De background-sizeeigenschap in CSS is een van de nuttigste - en meest complexe - eigenschappen op de achtergrond. Er zijn veel variaties en verschillende syntaxis die u voor deze eigenschap kunt gebruiken, die allemaal verschillende gebruiksscenario's hebben. Hier is een eenvoudig voorbeeld:

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

Dat is een voorbeeld van de syntaxis met twee waarden voor de achtergrondgrootte. Er zijn vier verschillende syntaxis die u kunt gebruiken met deze eigenschap: de syntaxis van het trefwoord, de syntaxis van één waarde, de syntaxis van twee waarden en de syntaxis voor meerdere achtergronden.

Sleutelwoorden

Naast de standaardwaarde ( auto) zijn er twee trefwoorden die u kunt gebruiken met background-size: coverencontain

Zie de achtergrondgrootte van de pen door CSS-Tricks (@ css-tricks) op CodePen.

Verwant

  • achtergrond-bijlage
  • achtergrond-clip
  • Achtergrond kleur
  • achtergrond afbeelding
  • achtergrond-oorsprong
  • achtergrond-positie
  • achtergrond herhaling

Meer middelen

  • CSS3 Spec
  • MDN

Browser-ondersteuning

Chrome Safari Firefox Opera D.W.Z Android iOS
3+ 4.1+ 3.6+ 10+ 9+ 2.3+ 4.0+