Koodin lyhentämiseksi on myös mahdollista määrittää kaikki taustaominaisuudet yhdessä yksittäinen omaisuus. Tätä kutsutaan pikakirjoitukseksi.
Kirjoittamisen sijaan:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Voit käyttää lyhennettyä ominaisuutta tausta:
Käytä shorthand-ominaisuutta asettaaksesi taustaominaisuudet yhteen ilmoitus:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Kokeile itse →
<!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>
Pikakirjoitusominaisuutta käytettäessä ominaisuusarvojen järjestys on:
taustaväri
taustakuva
taustatoisto
taustaliite
tausta-sijainti
Sillä ei ole väliä, jos jokin omaisuuden arvoista puuttuu, kunhan muut ovat tässä järjestyksessä. Huomaa, että emme käytä tausta-liiteominaisuutta yllä olevissa esimerkeissä, koska sillä ei ole arvoa.
Asettaa kaikki taustaominaisuudet yhdessä ilmoituksessa
Määrittää, onko taustakuva kiinteä vai vieritetäänkö sivun muun osan mukana
Määrittää taustan maalausalueen
Asettaa elementin taustavärin
Asettaa elementin taustakuvan
Määrittää, missä taustakuva(t) sijoitetaan
Asettaa taustakuvan aloituspaikan
Määrittää, kuinka taustakuva toistetaan
Määrittää taustakuvien koon