CSS bakgrundskortformad

CSS background - kortformad egenskap

För att förenkla koden kan du också specificera alla bakgrundsegenskaper i en egenskap. Det kallas en kortformad egenskap.

Istället för att skriva:

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Du kan använda en kortformad egenskap background:

Exempel

Använd en kortformad egenskap för att ställa in bakgrundsegenskaperna i ett uttalande:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

Prova själv

När du använder en kortformad egenskap är ordningen på värdena:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Om en av värdena saknas är det inget problem, ställ in de andra värdena i denna ordning.Observera att vi inte använde bakgrund-attachment-egenskapen i föregående exempel eftersom den inte har något värde.

Alla CSS-bakgrundsegenskaper

Egenskap Beskrivning
background Använd en kortformad egenskap för att ställa in alla bakgrundsegenskaper i ett uttalande.
background-attachment Ställ in om bakgrundsbilden är fast eller rullar tillsammans med övriga sidan.
background-clip Bestäm ritområdet för bakgrunden.
background-color Ställ in elementets bakgrundsfärg.
background-image Ställ in elementets bakgrundsbild.
background-origin Bestäm var bakgrundsbilden placeras.
background-position Ställer in startpositionen för bakgrundsbilden.
background-repeat Ställer in om och hur bakgrundsbilden upprepades.
background-size Ställer in storleken på bakgrundsbilden.