Εικόνα φόντου CSS

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

CSS φόντο-εικόνα

Η ιδιότητα εικόνα φόντου καθορίζει μια εικόνα που θα χρησιμοποιηθεί ως φόντο ενός στοιχείου.

Από προεπιλογή, η εικόνα επαναλαμβάνεται έτσι ώστε να καλύπτει ολόκληρο το στοιχείο.

Παράδειγμα

Ορίστε την εικόνα φόντου για μια σελίδα:

body {
  background-image: url("paper.gif");
}

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

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

<h1>Hello World!</h1>

<p>This page has an image as the background!</p>

</body>
</html>

Παράδειγμα

Αυτό το παράδειγμα δείχνει έναν κακό συνδυασμό κειμένου και εικόνας φόντου. Το κείμενο είναι δυσανάγνωστο:

body {
  background-image: url("bgdesert.jpg");
}

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

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

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Σημείωση: Όταν χρησιμοποιείτε μια εικόνα φόντου, χρησιμοποιήστε μια εικόνα που δεν ενοχλεί το κείμενο.

Η εικόνα φόντου μπορεί επίσης να οριστεί για συγκεκριμένα στοιχεία, όπως το στοιχείο <p>:

Παράδειγμα

 p {
  background-image: url("paper.gif");
}

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

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

<h1>Hello World!</h1>

<p>This paragraph has an image as the background!</p>

</body>
</html>

Η ιδιότητα εικόνας φόντου CSS

background-image: Ορίζει την εικόνα φόντου για ένα στοιχείο