☰

Στιλ φόντου με χρώμα και εικόνες

Εκτός από ένα χρώμα, μπορείτε να ορίσετε και μια εικόνα ως φόντο σε ένα στοιχείο html. Τα στιλ αυτά είναι:

Στιλ για φόντο και οι αντίστοιχες τιμές

Ιδιότητα: στιλ φόντου	Τιμή
background-color	τιμή χρώματος ή transparent Για Παράδειγμα: `background-color: #3fa;` `background-color: rgb(100, 200, 255);` `background-color: rgba(100, 200, 255, 0.3);` `background-color: transparent;`
background-image	τιμή url ή none Για Παράδειγμα: `background-image:url(logo.png);` `background-image:none;`
background-repeat	Επανάληψη εικόνας φόντου. Η προκαθορισμένη τιμή είναι: repeat. Για Παράδειγμα: `background-repeat: no-repeat;` `background-repeat: repeat-x;` `background-repeat: repeat-y;` `background-repeat: repeat;`
background-attachment	Κύλιση εικόνας φόντου. Οι τιμές είναι: scroll, fixed, local Για Παράδειγμα: `background-attachment: scroll;` `background-attachment: fixed;` `background-attachment: local;`
background-position	Θέση εικόνας φόντου. Οι τιμές είναι: τιμή μήκους ή right, top, center, bottom (χρειάζονται δύο τιμές για οριζόντια και κάθετη θέση) Για Παράδειγμα: `background-position: center center;` `background-position: top center;` `background-position: bottom right;`
background-size	Διαστάσεις εικόνας φόντου. Για Παράδειγμα: `background-size: 100px 50px;` `background-size: 100% 50%;` `background-size: contain;` `background-size: cover;`
background	Συνδυασμός των παραπάνω τιμών. Για Παράδειγμα: `background:#3fa url(logo.png) fixed center center;`

Το στιλ background-attachment: scroll;, επιτρέπει στην εικόνα να κυλάει μαζί με το κείμενο, αντίθετα το στιλ background-attachment:fixed;, διατηρεί την εικόνα σταθερή και εμφανίζεται το κείμενο να κυλάει επάνω από την εικόνα.