Η ιδιότητα CSS Background
Τι κάνει η ιδιότητα css background
Στο μάθημα αυτό θα δούμε τι κάνει η ιδιότητα css background και πως την χρησιμοποιούμε. Όπως υποδηλώνει και το όνομα της διαχειριζόμαστε την προβολή του παρασκηνίου της ιστοσελίδας. Σε αυτό μπορούμε να ορίσουμε χρώμα και εικόνα. Στην περίπτωση της εικόνας, μπορούμε να ορίσουμε την θέση της και την επανάληψη της οριζόντια ή /και κάθετα . Την ιδιότητα αυτή την χρησιμοποιούμε στην html ετικέτα body.
Χρώμα παρασκηνίου – background-color
Το χρώμα ορίζεται με τρείς τρόπους:
- Δεκαεξαδική τιμή. Παράδειγμα: #ff0000
- Τιμή του χρωματικού μοντέλου RGB (Red, Green, Blue με εύρος τιμών 0-255). Παράδειγμα: rgb(255,0,0).
- Ονομασία χρώματος. Παράδειγμα: red
Ας δούμε το ακόλουθο παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: #00FF40;
}
p {
background-color: rgb(0,255,64);
}
div {
background-color: Green;
}
</style>
</head>
<body>
<h1>Επικεφαλίδα 1</h1>
<div>
Κείμενο σε μια ετικέτα div.
<p>Παράγραφος με το δικό της χρώμα</p>
Κείμενο στην ίδια ετικέτα div μετά την παράγραφο.
</div>
</body>
</html>
Το οποίο θα δώσει την ακόλουθη εικόνα:
Μέσα στην ετικέτα <head>…</head> ορίζουμε μια ετικέτα <style> στην οποία θα χρησιμοποιήσουμε εσωτερικό στυλ κανόνων. Οι κανόνες που χρησιμοποιήσαμε είναι ένας για την ετικέτα κεφαλίδας h1, ένας για την ετικέτα παραγράφου p και ένας για μια ετικέτα κουτί div για την οποία μιλάμε σε άλλο μάθημα. Για κάθε έναν από αυτούς τους κανόνες ορίζουμε ένα χρώμα παρασκηνίου. Ο κάθε κανόνας θα εφαρμοστεί όταν κληθεί η αντίστοιχη ετικέτα. Ο κανόνας κεφαλίδας 1 και παραγράφου χρησιμοποιούν το ίδιο χρώμα πράσινο. Η διαφορά τους είναι ότι ο κανόνας κεφαλίδας χρησιμοποιεί έναν δεκαεξαδικό αριθμό ενώ ο κανόνας παραγράφου αριθμούς του χρωματικού μοντέλου RGB. Ο κανόνας για την ετικέτα div χρησιμοποιεί την ονομασία του χρώματος το οποίο βγάζει ένα κυπαρισσί πράσινο χρώμα.
Στην ετικέτα body βλέπουμε την χρήση της κεφαλίδας 1 με το χρώμα παρασκηνίου. Στην συνέχεια βλέπουμε την χρήση της ετικέτας div η οποία περιλαμβάνει την ετικέτα παραγράφου p.
Παρατηρούμε λοιπόν την επίδραση που έχουν οι κανόνες css στις αντίστοιχες html ετικέτες όταν αυτές κληθούν.
Εικόνα παρασκηνίου – background-image
Η εικόνα παρασκηνίου καθορίζεται από την ιδιότητα css background-image, για την ετικέτα body, η οποία γεμίζει το παρασκήνιο με την εικόνα που θα επιλεγεί. Η εικόνα πρέπει να έχει τέτοιο χρωματισμό ή/και ποσοστό διαφάνειας ώστε να μην καλύπτει το υπόλοιπο περιεχόμενο της σελίδας το οποίο βρίσκεται μπροστά από αυτή. Ακολουθεί ένα παράδειγμα:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<p>Κείμενο</p>
<h1>Κεφαλίδα 1</h1>
</body>
</html>
Η ιδιότητα background-image καλεί την url με το όνομα της εικόνας. Το αποτέλεσμα έχει ως εξής:
Η εικόνα επαναλαμβάνεται οριζόντια και κάθετα σε όλη την σελίδα και στα δύο παραδείγματα. Στο πάνω παράδειγμα το κείμενο είναι ευανάγνωστο επειδή η εικόνα είναι αχνή. Στο κάτω παράδειγμα έχει χρησιμοποιηθεί εικόνα με έντονα γράμματα με αποτέλεσμα το κείμενο να μην είναι ευανάγνωστο.
Καλό είναι στην ιδιότητα css background να αποφεύγουμε την χρήση εικόνας και να προτιμούμε το χρώμα.
Η ιδιότητα background-repeat
Μαζί με την ιδιότητα background-image μπορεί να χρησιμοποιηθεί και η ιδιότητα background-repeat. Αυτό που κάνει είναι να περιορίζει την επανάληψη της εικόνας μόνο οριζόντια ή μόνο κάθετα όπως φαίνεται στο ακόλουθο παράδειγμα.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Επικεφαλίδα 1</h1>
</body>
</html>
Σε αυτό το παράδειγμα χρησιμοποιήθηκε μια λεπτή εικόνα χρωματικής διαβάθμισης. Η παράμετρος repeat-x περιορίζει την επανάληψη της μόνο οριζόντια, δηλαδή στο μήκος της σελίδας δίνοντας το εφέ της διαβάθμισης.
Επίλογος
Σε αυτό το μάθημα είδαμε την ιδιότητα css-background και τις χρήσεις της τόσο σε επιλογή χρώματος όσο και σε επιλογή εικόνας.
