HTML Backgrounds

Καλή επιλογή φόντου κάνει τον ιστότοπο να φαίνεται εξαιρετικός.

Παράδειγμα

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

（Περισσότερες παραδείγματα μπορούν να βρεθούν στην κατώτερη πλευρά αυτής της σελίδας。）

Φόντο (Backgrounds)

<body> Έχει δύο ετικέτες ρύθμισης του φόντου. Το φόντο μπορεί να είναι χρώμα ή εικόνα.

Χρώμα φόντου (Bgcolor)

Η ιδιότητα του χρώματος φόντου ορίζει το χρώμα του φόντου. Η τιμή μπορεί να είναι δεκαεξαδικό αριθμό, RGB τιμή ή όνομα χρώματος.

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Ο παρακάτω κώδικας ορίζει το χρώμα του φόντου ως μαύρο.

Φόντο (Background)

Η ιδιότητα φόντου ορίζει το φόντο ως εικόνα. Η τιμή της ιδιότητας είναι η διεύθυνση URL της εικόνας. Αν το μέγεθος της εικόνας είναι μικρότερο από το παράθυρο του περιηγητή, η εικόνα θα επαναληφθεί σε όλο το παράθυρο του περιηγητή.

<body background="clouds.gif">
<body background="http://www.codew3c.com/clouds.gif">

Η διεύθυνση URL μπορεί να είναι σχετική, όπως στην πρώτη γραμμή κώδικα. Μπορεί επίσης να είναι αβсолютτική, όπως στην δεύτερη γραμμή κώδικα.

Suggestion:Αν σχεδιάζετε να χρησιμοποιήσετε εικόνα φόντου, πρέπει να θυμάστε τα εξής:

  • Η εικόνα φόντου προσθέτει χρόνο φόρτωσης στην σελίδα. Σuggestion: Οι αρχεία εικόνας δεν πρέπει να ξεπερνούν τα 10k.
  • Η εικόνα φόντου ταιριάζει καλά με άλλες εικόνες στην σελίδα;
  • Η εικόνα φόντου ταιριάζει καλά με τον χρώμας γραφής του κειμένου;
  • Παράδειγμα όπου η εικόνα φόντου τυλίγεται στο κείμενο της σελίδας, φαίνεται καλά;
  • Η προσοχή στον κείμενο αποσπάται από την εικόνα φόντου;

Βασικές προσεγγίσεις - Χρήσιμες συμβουλές:

Οι ιδιότητες του φόντου (bgcolor), του φόντου (background) και του κειμένου (text) του ετικέτας <body> έχουν αποσύρθηκε στις πιο πρόσφατες προδιαγραφές HTML (HTML4 και XHTML). Η W3C έχει αποσύρει αυτές τις ιδιότητες στις προτάσεις τους.

Πρέπει να χρησιμοποιηθεί το CSS (Κατατασσόμενα Στυλ) για να καθορίσουν τη διάταξη και τις ιδιότητες εμφάνισης των στοιχείων HTML.

Περισσότερα παραδείγματα

Δυνατή εικόνα φόντου
Παράδειγμα όπου η εικόνα φόντου και ο χρώμας γραφής κάνουν το κείμενο της σελίδας εύκολα αναγνωστικό.
Δυνατή εικόνα φόντου 2
Άλλο παράδειγμα όπου η εικόνα φόντου και ο χρώμας γραφής κάνουν το κείμενο της σελίδας εύκολα αναγνωστικό.
Μη διαθέσιμη εικόνα φόντου
Παράδειγμα όπου η εικόνα φόντου και ο χρώμας γραφής κάνουν το κείμενο της σελίδας δύσκολο να διαβαστεί.