Η δυνατότητα επέκτασης της εικόνας φόντου σε όλο το πλάτος του παραθύρου του προγράμματος περιήγησης χρησιμοποιώντας CSS εμφανίστηκε μόνο με την κυκλοφορία των τελευταίων προδιαγραφών του - CSS3. Δυστυχώς, μέχρι στιγμής ένας μεγάλος αριθμός χρηστών του Ιστού χρησιμοποιούν πρώιμα προγράμματα περιήγησης που δεν κατανοούν τις προδιαγραφές CSS3. Επομένως, πρέπει να κάνετε μια επιλογή - είτε χρησιμοποιήστε μια λιγότερο βολική, αλλά λύση μεταξύ προγραμμάτων περιήγησης, είτε υψηλής τεχνολογίας, αλλά για περιορισμένο κοινό. Ας εξετάσουμε και τις δύο επιλογές.
Απαραίτητη
Βασικές γνώσεις HTML και CSS
Οδηγίες
Βήμα 1
Η πρώτη επιλογή βασίζεται σε προηγούμενες προδιαγραφές της γλώσσας CSS. Πρέπει να δημιουργήσετε μια δομή κώδικα HTML που έχει δύο επικαλυπτόμενα επίπεδα, το ένα πάνω από το άλλο. Τα επίπεδα (div) μπορούν να τεντωθούν στο πλάτος της οθόνης στην παλαιά διαδοχική περιγραφή περιγραφής γλώσσας. Στο κάτω μέρος των επιπέδων πρέπει να τοποθετήσετε την εικόνα φόντου και στην κορυφή θα τοποθετήσετε όλο το περιεχόμενο της σελίδας. Μια τέτοια δομή στο σώμα του εγγράφου μπορεί να μοιάζει με αυτήν:
Αυτό θα είναι το περιεχόμενο της σελίδας
Και η περιγραφή των στυλ για αυτήν τη δομή πρέπει να τοποθετηθεί στο τμήμα επικεφαλίδας. Για παράδειγμα, αυτό:
html, σώμα {
περιθώριο: 0px;
ύψος: 100%;
}
#Ιστορικό {
θέση: απόλυτη;
πλάτος: 100%;
ύψος: 100%;
}
#σώμα {
θέση: απόλυτη;
πλάτος: 100%;
ύψος: 100%;
ευρετήριο z: 2;
}
Εδώ τα επίπεδα με φόντο IDs (αυτή είναι η εικόνα φόντου σας) και το σώμα (αυτό είναι το επίπεδο για το περιεχόμενο της σελίδας) ρυθμίζονται σε απόλυτη θέση και 100% πλάτος και ύψος. Επιπλέον, στο επίπεδο περιεχομένου εκχωρείται ένας σειριακός αριθμός z-index = 2. Προσδιορίζει το "βάθος" των επιπέδων - όσο μεγαλύτερο είναι, τόσο πιο μακριά από το "κάτω" βρίσκεται αυτό το επίπεδο. Στην περίπτωσή μας, θα βρίσκεται πάνω από το επίπεδο φόντου, το οποίο χρησιμοποιεί τον προεπιλεγμένο ευρετήριο z.
Βήμα 2
Ο πλήρης κωδικός μπορεί να έχει την εξής μορφή:
html, σώμα {
περιθώριο: 0px;
ύψος: 100%;
}
#Ιστορικό {
θέση: απόλυτη;
πλάτος: 100%;
ύψος: 100%;
}
#σώμα {
θέση: απόλυτη;
πλάτος: 100%;
ύψος: 100%;
ευρετήριο z: 2;
}
Αυτό θα είναι το περιεχόμενο της σελίδας
Μην ξεχάσετε να αντικαταστήσετε το όνομα του αρχείου εικόνας φόντου fon.png.
Βήμα 3
Η δεύτερη επιλογή θα χρησιμοποιεί την ιδιότητα μεγέθους φόντου που εισήχθη στο CSS3. Ταυτόχρονα, προσθέστε παρόμοιες ιδιότητες στους ορισμούς στυλ που είχαν χρησιμοποιηθεί προηγουμένως από τα προγράμματα περιήγησης Mozilla Firefox, Google Chrome και Opera. Το μπλοκ περιγραφής στυλ σε αυτήν την έκδοση μπορεί να έχει την εξής μορφή:
html {
φόντο: url (fon.png) μη επαναλαμβανόμενο κέντρο σταθερό;
-webkit-background-size: κάλυμμα;
-moz-background-size: κάλυμμα;
-o-background-size: κάλυμμα;
μέγεθος φόντου: κάλυμμα;
}
Και εδώ μην ξεχάσετε να αντικαταστήσετε το όνομα του αρχείου εικόνας φόντου fon.png. Και στο σώμα του ίδιου του εγγράφου, δεν απαιτούνται ειδικές κατασκευές σε αυτήν την έκδοση.
