Στην ενότητα αυτή θα δούμε με ποιόν τρόπο ορίζουμε φόντο σε διάφορα στοιχεία μιας σελίδας με χρήση των CSS ιδιοτήτων background-. Οι CSS ιδιότητες με τις οποίες εισάγουμε φόντο είναι οι παρακάτω:
- background-color (ορίζουμε ένα χρώμα σαν φόντο)
- background-image (ορίζουμε μια εικόνα σαν φόντο)
- background-repeat (ορίζουμε αν θέλουμε να επαναλαμβάνεται η εικόνα που θέτουμε σαν φόντο)
- background-attachment (ορίζουμε αν η εικόνα που θέτουμε σαν φόντο θα γίνετε scroll μαζί με το περιεχόμενο της σελίδας ή θα παραμένει σταθερή (fixed).)
- background-position (ορίζουμε την θέση της εικόνας που θέτουμε σαν φόντο)
Χρώμα σαν φόντο
Με την ιδιότητα background-color ορίιζουμε ένα χρώμα σαν φόντο σε ένα στοιχείο της σελίδας μας.
Μπορούμε να ορίσουμε χρώμα με τρεις διαφορετικούς τρόπους:
Ορισμός ενός χρώματος σαν φόντο σε όλη την σελίδα
body {
background-color: blue;
}
background-color: blue;
}
Στο CSS στυλ αυτό χρησιμοποιούμε Επιλογέα το body για να ορίσουμε (με την ιδιότητα background-color) το χρώμα μπλε σαν φόντο σε όλη την σελίδα. Δοκιμάστε να αλλάξετε το χρώμα blue
- με το όνομα του χρώματος, πχ. red, blue κτλ.
- με την τιμή RGB (Red Green Blue), πχ. rgb(255,0,0)
- με το δεκαεξαδικό σύστημα (hex), πχ. #66FF33
Εικόνα σαν φόντο
Με την ιδιότητα background-image ορίζουμε σαν φόντο μια εικόνα σε ένα στοιχείο της σελίδας μας. Εξορισμού η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το στοιχείο.
Εικόνα σαν φόντο σε ένα τμήμα div
div#menu_bar {
background-image: url('only_logo.jpg');
}
background-image: url('only_logo.jpg');
}
Το παραπάνω στυλ ορίζει την εικόνα only_logo.jpg σαν φόνο σε ολόκληρο το div με id=menu_bar. Η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το τμήμα div
Εικόνα σαν φόντο επαναλαμβανόμενη μόνο οριζόντια ή μόνο κάθετα ή χωρίς επανάληψη
Όπως είπαμε η εικόνα που ορίζουμε σαν φόντο σε ένα στοιχείο, εξορισμού επαναλαμβάνεται σε όλο το στοιχείο αυτό μέχρι να το γεμίσει οριζόντια και κάθετα. Με την ιδιότητα background-repeat, μπορούμε να ορίσουμε η εικόνα να επαναλαμβάνεται μόνο οριζόντια, βάζοντας την τιμή repeat-x, ή μόνο κάθετα βάζοντας την τιμή repeat-y
Έχουμε επισης την δυνατότητα να ορίσουμε την μη επανάληψη της εικόνας, βάζοντας την τιμή no-repeat
Οριζόντια επανάληψη της εικόνας στο φόντο της σελίδας
body {
background-image: url('only_logo.jpg');
background-repeat: repeat-x;
}
background-image: url('only_logo.jpg');
background-repeat: repeat-x;
}
Αλλάξτε την τιμή repeat-x σε repeat-y και δείτε το αποτέλεσμα
Μη επανάληψη της εικόνας στο φόντο της σελίδας
body {
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
}
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
}
Θέση της εικόνας που ορίζουμε σαν φόντο
Με την ιδιότητα background-position μπορούμε να ορίσουμε την ακριβή θέση της εικόνας που ορίζουμε σαν φόντο μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί στην κάθετη θέση της ίδιας εικόνας. Έτσι μ' αυτόν τον τρόπο ορίζουμε το σημείο τοποθέτησης της εικόνας μέσα στο στοιχείο. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι εξής:
Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της ιδιότητας background-repeat έχοντας την τιμή no-repeat
Επίσης έχουμε την δυνατότητα να ορίσουμε την εικόνα σταθερή (fixed) σε σχέση με το περιεχόμενο της σελίδας όταν αυτή γίνεται scroll ή να κινείται μαζί με το περιεχόμενο (scroll)
- top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
- x% y%
- Θέση-x Θέση-y
Ορισμός εικόνας σαν φόντο στην θέση 50px οριζόντια και 100px κάθετα
body {
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
background-position: 50px 100px;
}
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
background-position: 50px 100px;
}
Το σημείο που θα τοποθετηθεί η εικόνα φόντου, σύμφωνα με το στυλ, είναι το σημείο 50,100 της επιφάνειας της σελίδας. Δοκιμάστε να τοποθετήσετε την εικόνα σε άλλο σημείο χρησιμοποιώντας τις τιμές που βλέπετε στην παραπάνω λίστα
Επίσης έχουμε την δυνατότητα να ορίσουμε την εικόνα σταθερή (fixed) σε σχέση με το περιεχόμενο της σελίδας όταν αυτή γίνεται scroll ή να κινείται μαζί με το περιεχόμενο (scroll)
Ορισμός της εικόνας σαν σταθερό κινούμενο φόντο
body {
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
Αλλάξτε την τιμή της ιδιότητας background-attachment σε scroll και κάντε scroll στην σελίδα
Όλες οι CSS ιδιότητες background σε μια
Όπως είδαμε υπάρχουν πέντε ιδιότητες background. Έχουμε την δυνατότητα να τις γράψουμε όλες μαζί σε μια ιδιότητα, για χάρη συντομίας, την background.
Προσοχή: η σειρά με την οποία πρέπει να γράφουμε τις τιμές στην ιδιότητα background είναι η εξής:
Συνιστώ να μην χρησιμοποιείτε την ιδιότητα background, ιδιαίτερα στην περίπτωση που δεν είστε εξοικειωμένοι με την CSS. Γράφοντας μεμονωμένες τις ιδιότητες είναι εύκολα αναγνώσιμες άρα και εύκολα να τις διαχειριστεί κανείς.
Ορισμός φόντου χρησιμοποιώντας και τις πέντε ιδιότητες σε μια
body {
background: green url('only_logo.jpg') no-repeat fixed right center;
}
background: green url('only_logo.jpg') no-repeat fixed right center;
}
Με το παραπάνω στυλ, ορίζουμε την εικόνα only_logo.jpg σαν φόντο σε όλη την σελίδα (body) η οποία είναι σταθερή (fixed) και είναι τοποθετημένη δεξιά του οριζόντιου άξονα και στην μέση του κάθετου άξονα της οθόνης. Επίσης το υπόλοιπο της οθόνης έχει φόντο πράσινο (green)
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Συνιστώ να μην χρησιμοποιείτε την ιδιότητα background, ιδιαίτερα στην περίπτωση που δεν είστε εξοικειωμένοι με την CSS. Γράφοντας μεμονωμένες τις ιδιότητες είναι εύκολα αναγνώσιμες άρα και εύκολα να τις διαχειριστεί κανείς.
Όλες οι ιδιότητες της CSS για το φόντο των στοιχείων
Οι ιδιότητες της CSS για το φόντο των στοιχείων, μας επιτρέπουν να θέσουμε ένα χρώμα σαν φόντο, να θέσουμε μια εικόνα σαν φόντο, να επαναλάβουμε μια εικόνα στο φόντο (οριζόντια ή κάθετα στην οθόνη) και να τοποθετήσουμε μια εικόνα στο φόντο με συγκεκριμένη στοίχιση
Στον παρακάτω πίνακα παρουσιάζονται οι CSS ιδιότητες:
Στον παρακάτω πίνακα παρουσιάζονται οι CSS ιδιότητες:
| Ιδιότητα | Τιμές | Περιγραφή |
|---|---|---|
| background | background-color background-image background-repeat background-attachment background-position |
Η ιδιότητα αυτή είναι συντομογραφία των πέντε βασικότερων ιδιοτήτων του φόντου: background-color, background-image, background-repeat, background-attachment, background-position Δοκίμασε το |
| background-attachment | scroll fixed |
Ορίζει αν η εικόνα που θέτουμε για φόντο με την CSS ιδιότητα background-image, θα γίνετε scroll μαζί με το περιεχόμενο της σελίδας (scroll) ή θα παραμένει σταθερή (fixed). Δοκίμασε το |
| background-color | χρώμα transparent |
Ορίζει το χρώμα του φόντου Δοκίμασε το |
| background-image | URL none |
Ορίζει το URL της εικόνας που θέτουμε για φόντο Δοκίμασε το |
| background-position | top left top center top right center left center center center right bottom left bottom center bottom right x% y% Θέση-x Θέση-y |
Ορίζει την θέση της εικόνας του φόντου. Η ιδιότητα αυτή έχει αποτέλεσμα όταν έχουμε ορίσει την εικόνα να μην επαναλαμβάνεται, δηλαδή η ιδιότητα background-repeat έχει την τιμή no-repeat. Δοκίμασε το |
| background-repeat | repeat repeat-x repeat-y no-repeat |
Ορίζει, για την εικόνα που θέτουμε για φόντο με την ιδιότητα background-image, να επαναλαμβάνεται σε όλη την οθόνη (repeat), ή να επαναλαμβάνεται κατά μήκος της σελίδας (repeat-x) ή να επαναλαμβάνεται κατά ύψος της σελίδας (repeat-y) ή να μην επαναλαμβάνεται καθόλου (no-repeat). Δοκίμασε το |
Παραδείγματα
Ορισμός χρώματος του φόντου
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα στο φόντο διάφορων στοιχείων μιας σελίδας (ιδιότητα background-color)
Ορισμός χρώματος σαν φόντο σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα στο φόντο όλου του πίνακα, σε γραμμές του πίνακα, ή σε κελιά του πίνακα (ιδιότητα background-color)
Ορισμός εικόνας σαν φόντο
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε εικόνα σαν φόντο σε μια σελίδα (ιδιότητα background-image)
Κάθετη επανάληψη της εικόνας του φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να επαναλάβουμε την εικόνα που ορίσαμε σαν φόντο μιας σελίδας (ιδιότητα background-repeat)
Οριζόντια επανάλυψη της εικόνας του φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να επαναλάβουμε την εικόνα που ορίσαμε σαν φόντο μιας σελίδας (ιδιότητα background-repeat)
Στοίχιση της εικόνας που ορίσαμε σαν φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε βάλουμε μια εικόνα σαν φόντο με συγκεκριμένη στοίχιση σε μια σελίδα (ιδιότητα background-position)
Ορισμός μιας εικόνας σαν φόντο σε συγκεκριμένο σημείο στην σελίδα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε μια εικόνα σαν φόντο της σελίδας μας, τοποθετώντας την σε συγκεκριμένο σημείο, ορίζοντας τις συντεταγμένες x και y. Οι συντεταγμένες x και y μπορεί να είναι είτε σε pixels είτε σε %. Η ιδιότητα αυτή έχει αποτέλεσμα όταν έχουμε ορίσει την εικόνα να μην επαναλαμβάνεται, δηλαδή η ιδιότητα background-repeat έχει την τιμή no-repeat. (ιδιότητα background-position)
Σταθερή εικόνα του φόντου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να κάνουμε την εικόνα του φόντου να μην γίνετε scrolling μαζί με το περιεχόμενο της σελίδας (ιδιότητα background-attachment)
Ορισμός εικόνας σαν φόντο σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε εικόνα σαν φόντο όλου του πίνακα, σε γραμμές του πίνακα, ή σε κελιά του πίνακα (ιδιότητα background-image)
Όλες οι ιδιότητες του φόντου σε μια δήλωση
Το παράδειγμα αυτό παρουσιάζει πως με μια μόνο δήλωση μπορούμε να ορίσουμε όλές τις ιδιότητες (ιδιότητα background)
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα στο φόντο διάφορων στοιχείων μιας σελίδας (ιδιότητα background-color)
Ορισμός χρώματος σαν φόντο σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε χρώμα στο φόντο όλου του πίνακα, σε γραμμές του πίνακα, ή σε κελιά του πίνακα (ιδιότητα background-color)
Ορισμός εικόνας σαν φόντο
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε εικόνα σαν φόντο σε μια σελίδα (ιδιότητα background-image)
Κάθετη επανάληψη της εικόνας του φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να επαναλάβουμε την εικόνα που ορίσαμε σαν φόντο μιας σελίδας (ιδιότητα background-repeat)
Οριζόντια επανάλυψη της εικόνας του φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να επαναλάβουμε την εικόνα που ορίσαμε σαν φόντο μιας σελίδας (ιδιότητα background-repeat)
Στοίχιση της εικόνας που ορίσαμε σαν φόντο
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε βάλουμε μια εικόνα σαν φόντο με συγκεκριμένη στοίχιση σε μια σελίδα (ιδιότητα background-position)
Ορισμός μιας εικόνας σαν φόντο σε συγκεκριμένο σημείο στην σελίδα
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να ορίσουμε μια εικόνα σαν φόντο της σελίδας μας, τοποθετώντας την σε συγκεκριμένο σημείο, ορίζοντας τις συντεταγμένες x και y. Οι συντεταγμένες x και y μπορεί να είναι είτε σε pixels είτε σε %. Η ιδιότητα αυτή έχει αποτέλεσμα όταν έχουμε ορίσει την εικόνα να μην επαναλαμβάνεται, δηλαδή η ιδιότητα background-repeat έχει την τιμή no-repeat. (ιδιότητα background-position)
Σταθερή εικόνα του φόντου
Το παράδειγμα αυτό παρουσιάζει πως μπορούμε να κάνουμε την εικόνα του φόντου να μην γίνετε scrolling μαζί με το περιεχόμενο της σελίδας (ιδιότητα background-attachment)
Ορισμός εικόνας σαν φόντο σε πίνακα
Το παράδειγμα αυτό παρουσιάζει πως βάζουμε εικόνα σαν φόντο όλου του πίνακα, σε γραμμές του πίνακα, ή σε κελιά του πίνακα (ιδιότητα background-image)
Όλες οι ιδιότητες του φόντου σε μια δήλωση
Το παράδειγμα αυτό παρουσιάζει πως με μια μόνο δήλωση μπορούμε να ορίσουμε όλές τις ιδιότητες (ιδιότητα background)
