Ιδιότητα background-image
Η ιδιότητα background-image ορίζει μια εικόνα φόντου
για ένα στοιχείο. Από προεπιλογή, η εικόνα
θα επαναληφθεί με αντίγραφά της σε όλο το μπλοκ, ωστόσο,
αυτή η συμπεριφορά μπορεί να απενεργοποιηθεί χρησιμοποιώντας την ιδιότητα
background-repeat.
Σύνταξη
επιλογέας {
background-image: url(διαδρομή προς την εικόνα);
}
επιλογέας {
background-image: none;
}
Τιμές
| Τιμή | Περιγραφή |
|---|---|
url |
Διαδρομή προς το αρχείο της εικόνας. Το όνομα της εικόνας μπορεί να είναι σε διπλά εισαγωγικά, μονά εισαγωγικά ή και χωρίς εισαγωγικά. |
none |
Απενεργοποιεί την εικόνα φόντου για το στοιχείο. |
Προεπιλεγμένη τιμή: none.
Παράδειγμα
Ας ορίσουμε μια εικόνα φόντου χρησιμοποιώντας την background-image,
απαγορεύοντας την επανάληψή της με την ιδιότητα
background-repeat:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Παράδειγμα
Χωρίς την background-repeat η εικόνα φόντου
θα γεμίσει με επαναλήψεις όλο το μπλοκ:
<div id="elem"></div>
#elem {
background-image: url("bg.png");
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Παράδειγμα
Μπορείτε ταυτόχρονα να ορίσετε εικόνα φόντου
και να ορίσετε χρώμα φόντου χρησιμοποιώντας την background-color.
Σε αυτή την περίπτωση, σε όσες περιοχές δεν υπάρχει εικόνα
φόντου - θα εμφανίζεται το χρώμα φόντου:
<div id="elem"></div>
#elem {
background-color: orange;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 3px solid black;
}
:
Δείτε επίσης
-
η ιδιότητα
background,
που είναι μια συντόμευση για τις ιδιότητες φόντου