Στην ενότητα αυτή θα δούμε με ποιόν τρόπο ορίζουμε φόντο σε διάφορα στοιχεία μιας σελίδας με χρήση των CSS ιδιοτήτων background-. Οι CSS ιδιότητες με τις οποίες εισάγουμε φόντο είναι οι παρακάτω:
  • background-color (ορίζουμε ένα χρώμα σαν φόντο)
  • background-image (ορίζουμε μια εικόνα σαν φόντο)
  • background-repeat (ορίζουμε αν θέλουμε να επαναλαμβάνεται η εικόνα που θέτουμε σαν φόντο)
  • background-attachment (ορίζουμε αν η εικόνα που θέτουμε σαν φόντο θα γίνετε scroll μαζί με το περιεχόμενο της σελίδας ή θα παραμένει σταθερή (fixed).)
  • background-position (ορίζουμε την θέση της εικόνας που θέτουμε σαν φόντο)

Χρώμα σαν φόντο

Με την ιδιότητα background-color ορίιζουμε ένα χρώμα σαν φόντο σε ένα στοιχείο της σελίδας μας.
Ορισμός ενός χρώματος σαν φόντο σε όλη την σελίδα
body {
background-color: blue;
}
Στο CSS στυλ αυτό χρησιμοποιούμε Επιλογέα το body για να ορίσουμε (με την ιδιότητα background-color) το χρώμα μπλε σαν φόντο σε όλη την σελίδα. Δοκιμάστε να αλλάξετε το χρώμα blue
Μπορούμε να ορίσουμε χρώμα με τρεις διαφορετικούς τρόπους:
  • με το όνομα του χρώματος, πχ. red, blue κτλ.
  • με την τιμή RGB (Red Green Blue), πχ. rgb(255,0,0)
  • με το δεκαεξαδικό σύστημα (hex), πχ. #66FF33
Περισσότερα για την απόδοση των χρωμάτων, τόσο στην CSS όσο και στην HTML, θα βρείτε στην ενότητα Χρώματα της Σειράς Μαθημάτων HTML

Εικόνα σαν φόντο

Με την ιδιότητα background-image ορίζουμε σαν φόντο μια εικόνα σε ένα στοιχείο της σελίδας μας. Εξορισμού η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το στοιχείο.
Εικόνα σαν φόντο σε ένα τμήμα div
div#menu_bar {
background-image: url('only_logo.jpg');
}
Το παραπάνω στυλ ορίζει την εικόνα only_logo.jpg σαν φόνο σε ολόκληρο το div με id=menu_bar. Η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το τμήμα div

Εικόνα σαν φόντο επαναλαμβανόμενη μόνο οριζόντια ή μόνο κάθετα ή χωρίς επανάληψη

Όπως είπαμε η εικόνα που ορίζουμε σαν φόντο σε ένα στοιχείο, εξορισμού επαναλαμβάνεται σε όλο το στοιχείο αυτό μέχρι να το γεμίσει οριζόντια και κάθετα. Με την ιδιότητα background-repeat, μπορούμε να ορίσουμε η εικόνα να επαναλαμβάνεται μόνο οριζόντια, βάζοντας την τιμή repeat-x, ή μόνο κάθετα βάζοντας την τιμή repeat-y
Οριζόντια επανάληψη της εικόνας στο φόντο της σελίδας
body {
background-image: url('only_logo.jpg');
background-repeat: repeat-x;
}
Αλλάξτε την τιμή repeat-x σε repeat-y και δείτε το αποτέλεσμα
Έχουμε επισης την δυνατότητα να ορίσουμε την μη επανάληψη της εικόνας, βάζοντας την τιμή no-repeat
Μη επανάληψη της εικόνας στο φόντο της σελίδας
body {
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
}

Θέση της εικόνας που ορίζουμε σαν φόντο

Με την ιδιότητα background-position μπορούμε να ορίσουμε την ακριβή θέση της εικόνας που ορίζουμε σαν φόντο μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί στην κάθετη θέση της ίδιας εικόνας. Έτσι μ' αυτόν τον τρόπο ορίζουμε το σημείο τοποθέτησης της εικόνας μέσα στο στοιχείο. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι εξής:
  • 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;
}
Το σημείο που θα τοποθετηθεί η εικόνα φόντου, σύμφωνα με το στυλ, είναι το σημείο 50,100 της επιφάνειας της σελίδας. Δοκιμάστε να τοποθετήσετε την εικόνα σε άλλο σημείο χρησιμοποιώντας τις τιμές που βλέπετε στην παραπάνω λίστα
Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της ιδιότητας background-repeat έχοντας την τιμή no-repeat

Επίσης έχουμε την δυνατότητα να ορίσουμε την εικόνα σταθερή (fixed) σε σχέση με το περιεχόμενο της σελίδας όταν αυτή γίνεται scroll ή να κινείται μαζί με το περιεχόμενο (scroll)
Ορισμός της εικόνας σαν σταθερό κινούμενο φόντο
body {
background-image: url('only_logo.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
Αλλάξτε την τιμή της ιδιότητας background-attachment σε scroll και κάντε scroll στην σελίδα

Όλες οι CSS ιδιότητες background σε μια

Όπως είδαμε υπάρχουν πέντε ιδιότητες background. Έχουμε την δυνατότητα να τις γράψουμε όλες μαζί σε μια ιδιότητα, για χάρη συντομίας, την background.
Ορισμός φόντου χρησιμοποιώντας και τις πέντε ιδιότητες σε μια
body {
background: green url('only_logo.jpg') no-repeat fixed right center;
}
Με το παραπάνω στυλ, ορίζουμε την εικόνα only_logo.jpg σαν φόντο σε όλη την σελίδα (body) η οποία είναι σταθερή (fixed) και είναι τοποθετημένη δεξιά του οριζόντιου άξονα και στην μέση του κάθετου άξονα της οθόνης. Επίσης το υπόλοιπο της οθόνης έχει φόντο πράσινο (green)
Προσοχή: η σειρά με την οποία πρέπει να γράφουμε τις τιμές στην ιδιότητα background είναι η εξής:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Συνιστώ να μην χρησιμοποιείτε την ιδιότητα background, ιδιαίτερα στην περίπτωση που δεν είστε εξοικειωμένοι με την 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)
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.