Ιδιότητα background-origin

Η ιδιότητα background-origin ορίζει πώς η εικόνα φόντου (συγκεκριμένα η εικόνα, όχι το γέμισμα) θα τοποθετείται σε σχέση με το στοιχείο: ένα μέρος της εικόνας φόντου θα εισχωρεί κάτω από το περίγραμμα, το φόντο δεν θα εισχωρεί κάτω από το περίγραμμα ή το φόντο θα τοποθετείται μόνο πάνω από το περιεχόμενο του στοιχείου (δηλαδή το padding θα απομακρύνει το φόντο).

Σύνταξη

επιλογέας {
	background-origin: padding-box | border-box | content-box;
}

Τιμές

Τιμή	Περιγραφή
`border-box`	Η εικόνα φόντου θα εισχωρήσει κάτω από το περίγραμμα.
`padding-box`	Η εικόνα φόντου δεν θα εισχωρεί κάτω από το περίγραμμα.
`content-box`	Η εικόνα φόντου θα είναι μόνο πάνω από το περιεχόμενο.

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

Παρατηρήσεις

Η ιδιότητα background-origin δεν λειτουργεί, όταν το background-attachment έχει τιμή fixed. Επίσης, όταν το background-repeat έχει τιμή repeat, η ιδιότητα background-origin λειτουργεί πάντα όπως με τιμή border-box.

Παράδειγμα . Προεπιλογή

Από προεπιλογή, το φόντο δεν θα εισχωρήσει κάτω από το περίγραμμα:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Παράδειγμα . Τιμή border-box

Τώρα το φόντο θα εισχωρήσει κάτω από το περίγραμμα:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Παράδειγμα . Τιμή content-box

Τώρα το φόντο θα απομακρυνθεί μέσω του padding:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

Παράδειγμα . Με background-repeat: repeat

Όταν το background-repeat έχει τιμή repeat, η ιδιότητα background-origin λειτουργεί πάντα, όπως με τιμή border-box, δηλαδή το φόντο εισχωρεί πάντα κάτω από το περίγραμμα:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

Δείτε επίσης

η ιδιότητα background-clip,
που ορίζει τη θέση τόσο της εικόνας φόντου, όσο και του γεμίσματος
η ιδιότητα background,
που είναι μια συντόμευση για το φόντο