CSS – Cascading Style Sheets (Ιδιότητες φόντου - background) Καθορίζουν το φόντο των στοιχείων της HTML Χρώμα φόντου Φόντο εικόνας (τοποθέτηση εικόνας,

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (Ιδιότητες φόντου - background) Καθορίζουν το φόντο των στοιχείων της HTML Χρώμα φόντου Φόντο εικόνας (τοποθέτηση εικόνας,"— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (Ιδιότητες φόντου - background) Καθορίζουν το φόντο των στοιχείων της HTML Χρώμα φόντου Φόντο εικόνας (τοποθέτηση εικόνας, οριζόντια και κατακόρυφη επανάληψη)

2 CSS – Cascading Style Sheets (Ιδιότητα background-color) Καθορίζει το χρώμα φόντου ενός στοιχείου της HTML ΤιμήΠεριγραφή Χρώμαόνομα χρώματος (π.χ. red) τιμή rgb (π.χ. rgb(255,0,0)) δεκαεξαδική τιμή (π.χ. #ff0000) TransparentΕξορισμού τιμή. Διαφανές φόντο

3 CSS – Cascading Style Sheets (Ιδιότητα background-color παράδειγμα εφαρμογής φόντου σε στοιχεία) body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} Επικεφαλίδα επιπέδου 1 Επικεφαλίδα επιπέδου 2 Παράγραφος κειμένου

4 CSS – Cascading Style Sheets (Ιδιότητα background-color εφαρμογή φόντου σε τμήματα κειμένου) span.highlight {background-color:yellow} Αυτό είναι κείμενο με κίτρινο φόντο. Το κείμενο συνεχίζεται από εδώ και πέρα χωρίς φόντο. Κι αυτό είναι κείμενο με κίτρινο φόντο.

5 CSS – Cascading Style Sheets (Ιδιότητα background-image) Καθορίζει σαν φόντο ενός στοιχείου HTML μια εικόνα ΤιμήΠεριγραφή url(διαδρομή εικόνας)Η διαδρομή (διεύθυνση url) μιας εικόνας noneΕξορισμού τιμή. Καμία εικόνα.

6 CSS – Cascading Style Sheets (Ιδιότητα background-image παράδειγμα) body { background-image: url (pship.jpg) } Φόντο εικόνας

7 CSS – Cascading Style Sheets (Ιδιότητα background-repeat) Καθορίζει αν η εικόνα στο φόντο θα επαναλαμβάνεται και πώς ΤιμήΠεριγραφή repeatΕπανάληψη εικόνας και προς τις δύο κατευθύνσεις (εξορισμού τιμή) no-repeatΕμφάνιση εικόνας φόντου μία φορά repeat-xΕπανάληψη εικόνας κατά την οριζόντια διεύθυνση repeat-yΕπανάληψη εικόνας κατά την κατακόρυφη διεύθυνση

8 CSS – Cascading Style Sheets (Ιδιότητα background-repeat παράδειγμα μη επανάληψης) body { background-image: url(pship.jpg); background-repeat: no-repeat } Φόντο εικόνας χωρίς επανάληψη

9 CSS – Cascading Style Sheets (Ιδιότητα background-repeat οριζόντια επανάληψη) body { background-image: url(pship.jpg); background-repeat: repeat-x } Φόντο με οριζόντια επανάληψη

10 CSS – Cascading Style Sheets (Ιδιότητα background-repeat κατακόρυφη επανάληψη) body { background-image: url(pship.jpg); background-repeat: repeat-y } Φόντο με κατακόρυφη επανάληψη

11 CSS – Cascading Style Sheets (Ιδιότητα background-repeat για πλήρη επανάληψη) body { background-image: url(pship.jpg); background-repeat: repeat } Φόντο με γενική επανάληψη

12 CSS – Cascading Style Sheets (Ιδιότητα background-attachment) Καθορίζει αν η εικόνα στο φόντο θα κυλάει ή όχι μαζί με το κείμενο ΤιμήΠεριγραφή scrollΗ εικόνα θα κυλάει μαζί με το κείμενο fixedΗ εικόνα δεν θα κυλάει μαζί με το κείμενο (παραμένει σταθερή)

13 CSS – Cascading Style Sheets (Ιδιότητα background-position) Καθορίζει τη θέση της εικόνας φόντου – εξορισμού θέση πάνω αριστερά ΤιμήΠεριγραφή top left top center top right center left center center right bottom left bottom center bottom right Πάνω αριστερά Πάνω κέντρο Πάνω δεξιά Μέση αριστερά Μέση κέντρο Μέση δεξιά Κάτω αριστερά Κάτω κέντρο Κάτω δεξιά x% y%Οριζόντια και κατακόρυφη απόσταση από την πάνω αριστερή γωνία σε ποσοστό της οθόνης xpos yposΟριζόντια και κατακόρυφη απόσταση από την πάνω αριστερή γωνία σε pixel Αν καθοριστεί μόνο μία παράμετρος, η δεύτερη θα είναι εξορισμού center

14 CSS – Cascading Style Sheets (Ιδιότητα background-position) body { background-image: url(pship.jpg); background-repeat: no-repeat; background-position: 30% 40% } Φόντο εικόνας με μετατόπιση

15 CSS – Cascading Style Sheets (Ιδιότητα background) Καθορίζει όλες τις ιδιότητες φόντου μαζί σε μία δήλωση body { background: #00ff00 url(pship.jpg) no-repeat fixed center; } Κείμενο...