Επανάληψη εικόνας φόντου CSS

Πίνακας περιεχομένων

CSS φόντο-επανάληψη

Από προεπιλογή, η ιδιότητα background-image επαναλαμβάνει μια εικόνα τόσο οριζόντια όσο και κάθετα.

Ορισμένες εικόνες πρέπει να επαναλαμβάνονται μόνο οριζόντια ή κάθετα, διαφορετικά θα φαίνονται παράξενες, όπως αυτό:

Παράδειγμα

body
{
  background-image: url("gradient_bg.png");
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Strange background image...</p>

</body>
</html>

Εάν η παραπάνω εικόνα επαναλαμβάνεται μόνο οριζόντια (background-repeat: repeat-x;), το φόντο θα φαίνεται καλύτερα:

Παράδειγμα

body
{
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("gradient_bg.png");
  background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>

</body>
</html>

Συμβουλή: Για να επαναλάβετε μια εικόνα κάθετα, ορίστε το background-repeat: repeat-y;

CSS background-repeat: no-repeat

Η εμφάνιση της εικόνας φόντου μόνο μία φορά καθορίζεται επίσης από την ιδιότητα background-repeat:

Παράδειγμα

Εμφάνιση της εικόνας φόντου μόνο μία φορά:

body
{
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image only shows once, but it is disturbing the reader!</p>

</body>
</html>

Στο παραπάνω παράδειγμα, η εικόνα φόντου τοποθετείται στην ίδια θέση με το κείμενο. Θέλουμε να αλλάξουμε τη θέση της εικόνας, ώστε να μην το κάνει ενοχλούν πάρα πολύ το κείμενο.

CSS φόντο-θέση

Η ιδιότητα background-position χρησιμοποιείται για καθορίστε τη θέση της εικόνας φόντου.

Παράδειγμα

Τοποθετήστε την εικόνα φόντου στην επάνω δεξιά γωνία:

body
{
   
background-image: url("img_tree.png");
   
background-repeat: no-repeat;
   
background-position: right top;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  margin-right: 200px;
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>Here, the background image is only shown once. In addition it is positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>

</body>
</html>

Οι ιδιότητες επανάληψης και θέσης φόντου CSS

background-position: Ορίζει την αρχική θέση μιας εικόνας φόντου
background-repeat: Ορίζει πώς θα επαναλαμβάνεται μια εικόνα φόντου