Pro zkrácení kódu je také možné zadat všechny vlastnosti pozadí v jednom jediná nemovitost. Toto se nazývá zkrácená vlastnost.
Místo psaní:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Můžete použít zkrácenou vlastnost pozadí:
Pomocí vlastnosti zkratky nastavte vlastnosti pozadí v jednom prohlášení:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Zkuste to sami →
<!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>
Při použití zkrácené vlastnosti je pořadí hodnot vlastnosti:
barva pozadí
obrázek na pozadí
opakování na pozadí
příloha-pozadí
pozice na pozadí
Nezáleží na tom, zda jedna z hodnot vlastnosti chybí, pokud je ostatní jsou v tomto pořadí. Všimněte si, že ve výše uvedených příkladech nepoužíváme vlastnost background-attachment, protože nemá žádnou hodnotu.
Nastaví všechny vlastnosti pozadí v jedné deklaraci
Nastaví, zda je obrázek na pozadí pevný nebo se posouvá se zbytkem stránky
Určuje oblast malby pozadí
Nastavuje barvu pozadí prvku
Nastaví obrázek pozadí pro prvek
Určuje, kde je/jsou umístěny obrázky na pozadí
Nastaví počáteční pozici obrázku na pozadí
Nastavuje, jak se bude obrázek na pozadí opakovat
Určuje velikost obrázku (obrázků) na pozadí