For at forkorte koden er det også muligt at angive alle baggrundsegenskaberne i én enkelt ejendom. Dette kaldes en stenografi egenskab.
I stedet for at skrive:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Du kan bruge stenografiegenskaben baggrund
:
Brug stenografiegenskaben til at indstille baggrundsegenskaberne i én erklæring:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Prøv det selv →
<!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 bruger stenografiegenskaben, er rækkefølgen af egenskabsværdierne:
baggrundsfarve
baggrundsbillede
background-repeat
baggrundsvedhæftning
baggrundsposition
Det er lige meget, om en af ejendomsværdierne mangler, så længe den andre er i denne rækkefølge. Bemærk, at vi ikke bruger egenskaben background-attachment i eksemplerne ovenfor, da den ikke har en værdi.
Indstiller alle baggrundsegenskaberne i én erklæring
Indstiller, om et baggrundsbillede er fast eller ruller med resten af siden
Angiver maleområdet for baggrunden
Indstiller baggrundsfarven for et element
Indstiller baggrundsbilledet for et element
Angiver, hvor baggrundsbilledet/-billederne er placeret
Indstiller startpositionen for et baggrundsbillede
Indstiller, hvordan et baggrundsbillede skal gentages
Angiver størrelsen på baggrundsbilledet/-billederne