Για να συντομεύσετε τον κώδικα, είναι επίσης δυνατό να προσδιορίσετε όλες τις ιδιότητες φόντου σε μία ενιαία ιδιοκτησία. Αυτό ονομάζεται συντομογραφία.
Αντί να γράψετε:
body {
background-color: #ffffff;
background-image:
url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}Μπορείτε να χρησιμοποιήσετε τη συντομογραφία φόντο:
Χρησιμοποιήστε την ιδιότητα συντομογραφίας για να ορίσετε τις ιδιότητες φόντου σε μία δήλωση:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}Δοκιμάστε το μόνοι σας →
<!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>
Όταν χρησιμοποιείτε την ιδιότητα στενογραφίας, η σειρά των τιμών των ιδιοτήτων είναι:
χρώμα φόντου
εικόνα φόντου
background-repeat
background-attachment
background-position
Δεν έχει σημασία αν λείπει μία από τις αξίες των ακινήτων, αρκεί η άλλα είναι με αυτή τη σειρά. Σημειώστε ότι δεν χρησιμοποιούμε την ιδιότητα background-attachment στα παραπάνω παραδείγματα, καθώς δεν έχει τιμή.
Ορίζει όλες τις ιδιότητες φόντου σε μία δήλωση
Ρυθμίζει εάν μια εικόνα φόντου θα διορθώνεται ή θα πραγματοποιεί κύλιση με την υπόλοιπη σελίδα
Καθορίζει την περιοχή ζωγραφικής του φόντου
Ορίζει το χρώμα φόντου ενός στοιχείου
Ορίζει την εικόνα φόντου για ένα στοιχείο
Καθορίζει πού θα τοποθετηθούν οι εικόνες φόντου
Ορίζει την αρχική θέση μιας εικόνας φόντου
Ορίζει πώς θα επαναλαμβάνεται μια εικόνα φόντου
Καθορίζει το μέγεθος των εικόνων φόντου