Χρήση σταθερής εικόνας παρασκηνίου στο tag body
Μια ιστοσελίδα έχει εξ ορισμού άσπρο παρασκήνιο, εκτός και αν ορίσουμε ένα χρώμα ή μια εικόνα παρασκηνίου. Υπεύθυνο για την εμφάνιση του παρασκηνίου της σελίδας είναι η ετικέτα, tag, body. Για να γίνει αυτό μπορούμε είτε να εισάγουμε ένα in line css rule στο tag body, είτε να φτιάξουμε έναν κανόνα css για το ίδιο tag.
Όπως και να έχει αυτό που πρέπει να κάνουμε είναι να χρησιμοποιήσουμε τις ιδιότητες του tag body. Αυτές είναι:
- η ιδιότητα background-image με την οποία ορίζουμε μια εικόνα παρασκηνίου,
- η ιδιότητα position με την οποία θέτουμε την θέση της εικόνας σε σχέση με το μέγεθος της σελίδας και
- η ιδιότητα background-attachment η οποία ορίζει την σταθερότητα της εικόνας
In line css rule
Για να θέσουμε τις παραπάνω ιδιότητες σε ένα in line css text, πηγαίνουμε στο tag body και γράφουμε τον ακόλουθο κώδικα
<body style="background-image:url(ImagePath/MyImage.jpg); position:relative; background-attachment:fixed">
Αυτό που κάνει ο κώδικας αυτός είναι να συνδέει μια εικόνα ως εικόνα παρασκηνίου. Στην συνέχεια θέτει την θέση της εικόνας ως σχετική με την θέση στην οποία βρίσκεται. Αυτό σημαίνει ότι μπορούμε να την μεταβάλουμε ορίζοντας συγκεκριμένες θέσεις στην εικόνα.
CSS Rule
Στην περίπτωση που θέλουμε να δημιουργήσουμε έναν κανόνα css, πηγαίνουμε σε μια κενή γραμμή μέσα στο tag header, συνήθως μετά τα meta tags, και γράφουμε τον ακόλουθο κώδικα
<style type="text/css">
body {
background-image: url(ImagePath/MyImage.jpg);
position:relative;
background-attachment:fixed
}
</style>
Ο κώδικας αυτός ορίζεται ως εσωτερικό φύλλο στυλ με χρήση της HTML ετικέτας Style. Ο παραπάνω κώδικας θα εφαρμοστεί αυτόματα για το tag body πράγμα το οποίο σημαίνει πως μέσα στο tag body δεν χρειάζεται να προσθέσουμε κάτι.
Το αποτέλεσμα σε κάθε περίπτωση είναι να κυλάει το περιεχόμενο της σελίδας με την εικόνα να παραμένει σταθερή. Αυτό φαίνεται στην παρακάτω εικόνα.
Σε αυτό το άρθρο είδαμε πως μπορούμε με την χρήση της ετικέτας tag body να ορίσουμε μια σταθερή εικόνα παρασκηνίου.
