CSS-bakgrundstenografi


Innehållsförteckning

    Visa innehållsförteckning


CSS-bakgrund - Stenografi-egenskap

För att förkorta koden är det också möjligt att ange alla bakgrundsegenskaper i en enskild fastighet. Detta kallas en stenografiegenskap.

Istället för att skriva:

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

Du kan använda förkortningsegenskapen bakgrund:

Exempel

Använd stenografiegenskapen för att ställa in bakgrundsegenskaperna i en deklaration:

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

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>The background Property</h1>

<p>The background property is a shorthand property for specifying all the background properties in one declaration.</p>

<p>Here, the background image is only shown once, and it is also positioned in the top-right corner.</p>

<p>We have also added a right margin, so that the text will not write over the background image.</p>

</body>
</html>


När du använder stenografiegenskapen är ordningen för egenskapsvärdena:

  • bakgrundsfärg

  • bakgrundsbild

  • background-repeat

  • background-attachment

  • bakgrundsposition

Det spelar ingen roll om något av fastighetsvärdena saknas, så länge som andra är i denna ordning. Observera att vi inte använder egenskapen background-attachment i exemplen ovan, eftersom den inte har något värde.



Alla CSS-bakgrundsegenskaper

background

Ställer in alla bakgrundsegenskaper i en deklaration

background-attachment

Ställer in om en bakgrundsbild är fixerad eller rullas med resten av sidan

background-clip

Anger målningsområdet för bakgrunden

background-color

Ställer in bakgrundsfärgen för ett element

background-image

Ställer in bakgrundsbilden för ett element

background-origin

Anger var bakgrundsbilden/-bilderna är placerade

background-position

Ställer in startpositionen för en bakgrundsbild

background-repeat

Ställer in hur en bakgrundsbild ska upprepas

background-size

Anger storleken på bakgrundsbilden/-erna