Κεφάλαιο 12: Φόντο

• 25 Ιουλίου 2012
• by: Georgios
• in: Web Design

Background

Αν θέλετε μπορείτε να αλλάξετε το φόντο ενός στοιχείου με τη χρήση μόνο μιας δήλωσης, χρησιμοποιώντας την ιδιότητα background όπως στο παράδειγμα που ακολουθεί:

background: color image top-position left-position repeat fixed;

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

Background attachment

Αν χρησιμοποιείτε μια εικόνα ως φόντο, μπορείτε να επιλέξετε αν θέλετε η εικόνα αυτή να κυλά μαζί με το περιεχόμενο της σελίδας σας ή να μένει σταθερό καθώς το περιεχόμενο κυλά δηλώνοντας την ιδιότητα background-attachment όπως στο παράδειγμα που ακολουθεί:

background-attachment: value;

και οι τιμές που μπορεί να πάρει είναι οι ακόλουθες:

fixed
scroll

Background color

Μπορείτε να ορίσετε το χρώμα φόντου σε ένα στοιχείο της σελίδας σας απλά χρησιμοποιώντας την ιδιότητα background-color όπως στο παράδειγμα που ακολουθεί:

background-color: value;

Οι τιμές που μπορεί να πάρει είναι οι ακόλουθες:

Το όνομα ενός χρώματος (red, green, yellow)
Μια δεκαεξαδική τιμή (#FF0, #FFFF00)
Μια τιμή rgb ( rgb(255, 255, 0) )
Μια διαφάνεια

Background image

Αν θέλετε σε ένα στοιχείο της σελίδας σας να ορίσετε ως φόντο μια εικόνα, μπορείτε να χρησιμοποιήσετε την ιδιότητα background-image όπως στο παράδειγμα που ακολουθεί:

background-image: url(url_to_image);

οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι ακόλουθες:

Η διεύθυνση μιας εικόνας
none

Background position

Αν έχετε ορίσει μια εικόνα ως φόντο σε ένα στοιχείο, μπορείτε να αλλάξετε τη θέση της εικόνας μέσα στο στοιχείο χρησιμοποιώντας την ιδιότητα background-position όπως στο παράδειγμα που ακολουθεί:

background-position: value;

και οι τιμές που μπορεί να δεχτεί είναι οι ακόλουθες

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% (απόσταση σε ποσοστό)
x y (απόσταση σε άλλη μονάδα μέτρησης)

Background repeat

Επίσης αν έχετε ορίσει μια εικόνα ως φόντο, μπορείτε να ελέγξετε αν αυτή η εικόνα θα επαναλαμβάνετε όταν το στοιχείο είναι μεγαλύτερο από την εικόνα και προς ποια κατεύθυνση, χρησιμοποιώντας την ιδιότητα background-repeat όπως στο παράδειγμα που ακολουθεί:

background-repeat: value;

και οι τιμές που μπορείτε να χρησιμοποιήσετε είναι οι ακόλουθες:

no-repeat
repeat
repeat-x
repeat-y

Προηγούμενο : Σύνδεσμοι και ψευδό-κλάσεις
Επόμενο :  Περίγραμμα