Ιδιότητα background-repeat

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

Σύνταξη

επιλογέας {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Τιμές

Τιμή	Περιγραφή
`no-repeat`	Η εικόνα δεν θα επαναλαμβάνεται καθόλου.
`repeat-x`	Η εικόνα θα επαναλαμβάνεται στον άξονα X.
`repeat-y`	Η εικόνα θα επαναλαμβάνεται στον άξονα Y.
`repeat`	Η εικόνα θα επαναλαμβάνεται στον άξονα X και στον άξονα Y.
`space`	Η εικόνα θα επαναληφθεί όσες φορές χρειάζεται για να γεμίσει πλήρως την περιοχή, αν αυτό δεν είναι δυνατό, προστίθεται κενός χώρος μεταξύ των εικόνων.
`round`	Η εικόνα θα επαναληφθεί έτσι ώστε στην περιοχή να χωράει ακέραιος αριθμός εικόνων, αν αυτό δεν είναι δυνατό, οι εικόνες φόντου κλιμακώνονται.

Προεπιλεγμένη τιμή: repeat - καλύπτει ολόκληρη την οθόνη με το μοτίβο.

Παράδειγμα

Από προεπιλογή, η εικόνα φόντου θα πλακοστρώσει ολόκληρο το στοιχείο:

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

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

Παράδειγμα

Ας κάνουμε την εικόνα να μην επαναλαμβάνεται:

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

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

Παράδειγμα

Τώρα ας επαναλαμβάνεται η εικόνα στον άξονα X:

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

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

Παράδειγμα

Και τώρα στον άξονα Y:

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

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

Παράδειγμα

Οι εικόνες που επαναλαμβάνονται στους άξονες μπορούν να τοποθετηθούν χρησιμοποιώντας την ιδιότητα background-position:

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

#elem {
	background-repeat: repeat-y;
	background-position: top center;
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Παράδειγμα

Ας δούμε πώς λειτουργεί η τιμή space:

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

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

Παράδειγμα

Ας δούμε πώς λειτουργεί η τιμή round:

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

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

Δείτε επίσης

η ιδιότητα background,
που είναι μια συντόμευση για τις ιδιότητες φόντου