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
:
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.
Ställer in alla bakgrundsegenskaper i en deklaration
Ställer in om en bakgrundsbild är fixerad eller rullas med resten av sidan
Anger målningsområdet för bakgrunden
Ställer in bakgrundsfärgen för ett element
Ställer in bakgrundsbilden för ett element
Anger var bakgrundsbilden/-bilderna är placerade
Ställer in startpositionen för en bakgrundsbild
Ställer in hur en bakgrundsbild ska upprepas
Anger storleken på bakgrundsbilden/-erna