CSS - Background
Οι ιδιότητες του CSS background χρησιμοποιούνται για να εισάγουμε φόντο σε ένα στοιχείο. Οι δυνατές επιλογές είναι οι εξής:
background-image: ορίζουμε μια εικόνα σαν φόντο
background-repeat: ορίζουμε αν θέλουμε να επαναλαμβάνεται η εικόνα που θέτουμε ως φόντο
background-position: ορίζουμε τη θέση της εικόνας που θέτουμε ως φόντο
background-color: ορίζουμε ένα χρώμα σαν φόντο
background-attachment: ορίζουμε αν το φόντο θα παραμένει σταθερό (fixed) ή αν θα μετακινείται όσο κάνουμε scroll τη σελίδα
background-image
Ορίζουμε μία εικόνα σαν φόντο ενός στοιχείου. Π.χ. για το στοιχείο body:
body {
color:red;
background-image:url(images/thundercats.jpg);
}
Χρήση της ιδιότητας background-image
background-repeat
Παρατηρούμε ότι η εικόνα επαναλαμβάνεται. Μπορούμε να ορίσουμε να επαναλαμβάνεται μόνο κατά τον άξονα x (repeat-x) ή μόνο κατά τον άξονα y (repeat-y) ή να μην επαναλαμβάνεται καθόλου. Οι δυνατές τιμές είναι:
επανάληψη της εικόνας και στους δύο άξονες (προκαθορισμένη επιλογή
repeat-x: επανάληψη της εικόνας στον άξονα x
repeat-y: επανάληψη της εικόνας στον άξονα y
no-repeat: καμία επανάληψη της εικόνας
body {
color:red;
background-image:url(images/thundercats.jpg);
background-repeat:no-repeat;
}
Χρήση της ιδιότητας background-repeat
background-position
Η προκαθορισμένη θέση της εικόνας είναι πάνω αριστερά. Με την ιδιότητα background-position μπορούμε να ρυθμίσουμε τη θέση της εικόνας με βάση τις παρακάτω τιμές. Η πρώτη τιμή αφορά την οριζόντια τοποθέτηση και η δεύτερη την κάθετη. Αν βάλουμε μία τιμή μόνο, η άλλη θεωρείται πως έχει την τιμή center.
- left top: αριστερά πάνω
- left center: αριστερά κέντρο
- left bottom: αριστερά κάτω
- right top: δεξιά πάνω
- right center: δεξιά κέντρο
- right bottom: δεξιά κάτω
- center top: κέντρο πάνω
- center center: κέντρο κέντρο
- center top: κέντρο πάνω
- x_pos ypos: η οριζόντια και κάθετη απόσταση αντίστοιχα από πάνω αριστερά (π.χ. 10 px 20 px αν η μέτρηση γίνεται σε pixel)
- x% y%: οι αποστάσεις ανά άξονα βάσει ποσοστού (πάνω αριστερά είναι 0% και κάτω δεξιά 100%)
Το αρχείο css μπορεί να γραφεί ως εξής:
body {
}
#test {
width:600px;
height:600px;
color:red;
border:solid 1px #000000;
background-image:url(images/thundercats.jpg);
background-repeat:no-repeat;
background-position: center center;
}
Χρήση της ιδιότητας background-position
background-color
Παίρνει σαν τιμή τα βασικά χρώματα (red, white, green, blue, orange κλπ) ή σε μορφή RGB (π.χ. Rgb(255,0,0) ή σε δεκαεξαδική μορφή (π.χ. #FF0000).
#test {
width:600px;
height:300px;
border:solid 1px #000000;
background-color:#FF0000;
}
Χρήση της ιδιότητας background-color
background-attachment
Ορίζουμε αν θέλουμε η εικόνα που έχουμε θέσει ως φόντο, να μένει σταθερή ή να γίνεται scroll κατά την περιήγησή μας στη σελίδα. Οι τιμές της είναι:
- scroll: το φόντο γίνεται scroll
- fixed: το φόντο παραμένει σε σταθερή θέση (απαραίτητη προϋπόθεση είναι να μην επαναλαμβάνεται η εικόνα)
body {
background-image:url(images/thundercats.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
#test {
height:2000px;
}
background
Η ιδιότητα background χρησιμεύει ώστε να ομαδοποίησει όλες τις παραπάνω. Με αυτόν τον τρόπο, το παράδειγμα που είδαμε στη χρήση τη background-position
background-image:url(images/thundercats.jpg);
background-repeat:no-repeat;
background-position: center center;
μπορεί να γραφεί
background:url(images/thundercats.jpg) no-repeat center center;