Ιδιότητα background-repeat

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

Σύνταξη

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

Τιμές

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

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης