Ιδιότητα background-image

Η ιδιότητα background-image ορίζει μια εικόνα φόντου για ένα στοιχείο. Από προεπιλογή, η εικόνα θα επαναληφθεί με αντίγραφά της σε όλο το μπλοκ, ωστόσο, αυτή η συμπεριφορά μπορεί να απενεργοποιηθεί χρησιμοποιώντας την ιδιότητα background-repeat.

Σύνταξη

cssεπιλογέας {
  background-image: url(διαδρομή προς την εικόνα);
}

cssεπιλογέας {
  background-image: none;
}

Τιμές

Προεπιλεγμένη τιμή: none.

Παράδειγμα

Ας ορίσουμε μια εικόνα φόντου χρησιμοποιώντας την background-image, απαγορεύοντας την επανάληψή της με την ιδιότητα background-repeat:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Παράδειγμα

Χωρίς την background-repeat η εικόνα φόντου θα γεμίσει με επαναλήψεις όλο το μπλοκ:

html<div id="elem"></div>

css#elem {
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Παράδειγμα

Μπορείτε ταυτόχρονα να ορίσετε εικόνα φόντου και να ορίσετε χρώμα φόντου χρησιμοποιώντας την background-color. Σε αυτή την περίπτωση, σε όσες περιοχές δεν υπάρχει εικόνα φόντου - θα εμφανίζεται το χρώμα φόντου:

html<div id="elem"></div>

css#elem {
  background-color: orange;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  border: 3px solid black;
}

Результат:

Δείτε επίσης