Με την βοήθεια του CSS μπορεί κανείς να ελέγξει τι βρίσκεται στο φόντο (background) των διαφορων στοιχείων (elements).
Μπορείς να βάλεις ένα συγκεκριμένο background-color και να το γεμίσεις με ένα συγκεκριμένο χρώμα, ή να ορίσεις το background-image και να το γεμίσεις με μία συγκεκριμένη εικόνα, ή μπορείς να κάνεις και συνδυασμό των δύο.
1 2 3 4 |
body { background-color: red; background-image: url(pattern.png); } |
Σε αυτό το παράδειγμα βλέπουμε το πως μπορούμε να χρησιμοποιήσουμε μία SVG εικόνα στο φόντο, ενσωματώνοντας την απευθείας μέσα στον κώδικα του CSS ως data URL.
See the Pen background color and image together by Chris Coyier (@chriscoyier) on CodePen.
Εδώ έχουμε μία μόνο εικόνα σε επανάληψη. Βέβαια μπορούμε να ορίσουμε πολλές εικόνες αν θέλουμε. Μπορούμε να το κάνουμε αυτό, βάζοντας τις διαφορετικές τιμες, ξεχωρίζοντας τες με κόμματα.
1 2 3 4 5 |
body { background-image: url(image-one.jpg), url(image-two.jpg); } |
Αν το αφήσουμε έτσι, το image-one.jpg θα επαναλαμβάνεται και θα καλύψει εντελώς το image-two.jpg. Μπορούμε όμως να τις ελέγξουμε ξεχωριστά, με άλλα background properties.
1 2 3 4 5 6 7 8 9 10 |
body { background-image: url(image-one.jpg), url(image-two.jpg); background-position: top right, /* this positions the first image */ bottom left; /* this positions the second image */ background-repeat: no-repeat; /* this applies to both images */ } |
Βάζοντας και στο background-position κόμματα, μπορούμε να ορίσουμε τι ισχύει για την κάθε εικόνα ξεχωριστά.
Το background-repeat έχει μόνο μία τιμή. Θα μπορούσαμε να βάλουμε πάλι δύο ξεχωριστές τιμές, μία για την κάθε εικόνα, αλλά αν θέσουμε μόνο μία τιμή, θα ισχύει και για τις δύο.
Είδαμε τι γίνεται με δύο μόνο εικόνες, τι συμβαίνει όμως όταν βάλουμε περισσότερες;
Εδώ έχουμε ορίσει 4 εικόνες, την καθεμία στοιχισμένη στην κάθε γωνία με ένα μικρό offset.
See the Pen Example of multiple backgrounds by Chris Coyier (@chriscoyier) on CodePen.
Προχωρώντας λίγο πιο πέρα, δεν μπορούμε να περιστρέψουμε (rotate) ή να γυρίσουμε (flip) τις background images, αλλά μπορούμε να κάνουμε τέτοια πράγματα σε ολόκληρα elements (ή pseudo-elements).
See the Pen Flipping Image So You Can Use Just One by Chris Coyier (@chriscoyier) on CodePen.
Θα πρέπει να σημειώσουμε ότι αν χρησιμοποιήσουμε πολλαπλές εικόνες, λειτουργεί σαν στοίβα (FIFO) και η πρώτη βρίσκεται στην κορυφή.
Θα μπορούσε να πει κανείς ότι θυμίζει το z-index, αλλά δεν είναι. Σίγουρα είναι κομμάτια ενός μεγαλύτερου αντικειμένου.
Μπορεί να μπερδέψει κάποιον γιατί λειτουργεί “ανάποδα” απ’ ότι η HTML. Αν κάποια στοιχεία έχουν το ίδιο z-index -και είναι τοποθετημένα έτσι ώστε να καλύπτουν το ένα το άλλο- το τελευταίο αντικείμενο θα είναι και αυτό που θα εμφανιστεί πάνω πάνω.
Επίσης μπορεί κανείς να χρησιμοποιήσει τα gradients σαν background-images. Για παράδειγμα:
See the Pen Tinted Image w/ Multiple Backgrounds by Chris Coyier (@chriscoyier) on CodePen.
Πηγή
css-tricks.com – CSS Basics: Using Multiple Backgrounds
Sai Kiran Anagani

agathan
Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών
του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην
τεχνική υποστήριξη του τμήματος. Ακολούθησε το
μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Google Ads engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.
"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Latest posts by agathan (see all)
- Αφιλόξενος πλανήτης Αφροδίτη: θα μπορούσε να υπάρχει ζωή; - 1 Οκτωβρίου 2020
- Τα ιπτάμενα αυτοκίνητα αρχίζουν να γίνονται πραγματικότητα - 13 Σεπτεμβρίου 2020
- Η ιστορική εκτόξευση της SpaceX που θα μεταφέρει αστροναύτες στον ISS - 26 Μαΐου 2020
Αφήστε ένα σχόλιο