Πώς να τεντώσετε μια εικόνα φόντου για να προσαρμόσετε μια ιστοσελίδα

Δώστε στο δικτυακό σας τόπο οπτικό ενδιαφέρον με γραφικά φόντου

Οι εικόνες αποτελούν σημαντικό μέρος των ελκυστικών σχεδίων ιστοτόπων. Αυτό περιλαμβάνει τη χρήση εικόνων φόντου. Αυτές είναι οι εικόνες και τα γραφικά που χρησιμοποιούνται πίσω από τις περιοχές μιας σελίδας, σε αντίθεση με τις εικόνες που παρουσιάζονται ως μέρος των σελίδων περιεχομένου. Αυτές οι εικόνες φόντου μπορούν να προσθέσουν οπτικό ενδιαφέρον σε μια σελίδα και να σας βοηθήσουν να επιτύχετε τον οπτικό σχεδιασμό που αναζητάτε σε μια σελίδα.

Εάν αρχίσετε να εργάζεστε με εικόνες φόντου, θα συναντήσετε αναμφισβήτητα το σενάριο όπου θέλετε να τεντωθεί η εικόνα ώστε να ταιριάζει στη σελίδα.

Αυτό ισχύει ιδιαίτερα για ανταποκρινόμενες ιστοσελίδες που παρέχονται σε ένα ευρύ φάσμα συσκευών και μεγέθη οθόνης .

Αυτή η επιθυμία να τεντώσει μια εικόνα φόντου είναι μια πολύ κοινή επιθυμία για τους σχεδιαστές ιστοσελίδων επειδή δεν κάθε εικόνα ταιριάζει στο χώρο μιας ιστοσελίδας. Αντί να ορίσετε ένα σταθερό μέγεθος, το τέντωμα της εικόνας της επιτρέπει να κάμπτεται για να ταιριάζει στη σελίδα, ανεξάρτητα από το πόσο πλάτος ή στενό είναι το παράθυρο του προγράμματος περιήγησης .

Ο καλύτερος τρόπος για να τεντώσετε μια εικόνα ώστε να ταιριάζει στο φόντο μιας σελίδας είναι να χρησιμοποιήσετε την ιδιότητα CSS3 για μέγεθος φόντου. Ακολουθεί ένα παράδειγμα που χρησιμοποιεί μια εικόνα φόντου για το σώμα μιας σελίδας και το οποίο καθορίζει το μέγεθος σε 100% έτσι ώστε να τεντώνεται πάντα για να ταιριάζει στην οθόνη.

σώμα {
υπόβαθρο: url (bgimage.jpg) no-repeat;
μέγεθος φόντου: 100%.
}}

Σύμφωνα με το caniuse.com, αυτή η ιδιότητα λειτουργεί σε IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ και σε όλα τα μεγάλα προγράμματα περιήγησης για κινητά. Αυτό σας καλύπτει όλα τα σύγχρονα προγράμματα περιήγησης που είναι διαθέσιμα σήμερα, πράγμα που σημαίνει ότι θα πρέπει να χρησιμοποιήσετε αυτήν την ιδιότητα χωρίς φόβο ότι δεν θα λειτουργήσει στην οθόνη κάποιου.

Αναπαραγωγή ενός τεντωμένου φόντου σε παλαιότερα προγράμματα περιήγησης

Είναι πολύ απίθανο ότι θα χρειαστεί να υποστηρίξετε οποιοδήποτε πρόγραμμα περιήγησης παλαιότερο από το IE9, αλλά ας υποθέσουμε ότι ανησυχείτε ότι ο IE8 δεν υποστηρίζει αυτή την ιδιότητα. Σε αυτή την περίπτωση, μπορείτε να ψεύσετε ένα τεντωμένο υπόβαθρο. Και μπορείτε να χρησιμοποιήσετε τα προθέματα του προγράμματος περιήγησης για το Firefox 3.6 (-moz-background-size) και το Opera 10.0 (-o-background-size).

Ο ευκολότερος τρόπος να πλαστογραφήσετε μια τεντωμένη εικόνα φόντου είναι να το τεντώσετε σε ολόκληρη τη σελίδα. Τότε δεν καταλήγετε σε επιπλέον χώρο ή πρέπει να ανησυχήσετε ότι το κείμενό σας ταιριάζει στην τεντωμένη περιοχή. Δείτε πώς μπορείτε να το κάνετε:

id = "bg" />

1. Πρώτα, βεβαιωθείτε ότι όλα τα προγράμματα περιήγησης έχουν ύψος 100%, περιθώρια 0 και συμπληρώματα 0 στα στοιχεία HTML BODY. Τοποθετήστε τα παρακάτω στην κεφαλή του εγγράφου HTML:

2. Προσθέστε την εικόνα που θέλετε να είναι το φόντο ως το πρώτο στοιχείο της ιστοσελίδας και δώστε την id του "bg":

3. Τοποθετήστε την εικόνα φόντου έτσι ώστε να είναι σταθερή στην κορυφή και στην αριστερή πλευρά και είναι 100% ευρεία και 100% ύψος. Προσθέστε αυτό στο φύλλο στυλ σας:

   img # bg {
   θέση: σταθερή.
   κορυφή: 0;
   αριστερά: 0;
   πλάτος: 100%.
   ύψος: 100%.
   }}

4. Προσθέστε όλο το περιεχόμενό σας στη σελίδα μέσα σε ένα στοιχείο DIV με μια ταυτότητα "περιεχομένου". Προσθέστε το DIV κάτω από την εικόνα:

   Όλο το περιεχόμενό σας εδώ - συμπεριλαμβανομένων κεφαλίδων, παραγράφων κ.λπ.

   Σημείωση: είναι ενδιαφέρον να δείτε τη σελίδα σας τώρα. Η εικόνα θα πρέπει να εμφανίζεται απλωμένη, αλλά το περιεχόμενό σας λείπει εντελώς. Γιατί; Επειδή η εικόνα φόντου είναι 100% σε ύψος και η διαίρεση περιεχομένου είναι μετά την εικόνα στη ροή του εγγράφου - τα περισσότερα προγράμματα περιήγησης δεν θα την εμφανίσουν.
   
5. Τοποθετήστε το περιεχόμενό σας έτσι ώστε να είναι σχετικό και έχει z-δείκτη 1. Αυτό θα το φέρει πάνω από την εικόνα φόντου σε συμβατά με πρότυπα προγράμματα περιήγησης. Προσθέστε αυτό στο φύλλο στυλ σας:

   #content {
   θέση: σχετική.
   z-δείκτης: 1;
   }}

1. Αλλά δεν είστε έτοιμοι. Ο Internet Explorer 6 δεν συμμορφώνεται με τα πρότυπα και εξακολουθεί να παρουσιάζει κάποια προβλήματα. Υπάρχουν πολλοί τρόποι για να αποκρύψετε το CSS από κάθε πρόγραμμα περιήγησης, αλλά το IE6, αλλά το πιο εύκολο (και λιγότερο πιθανό να προκαλέσει άλλα προβλήματα) είναι να χρησιμοποιήσετε σχόλια υπό όρους. Τοποθετήστε τα ακόλουθα μετά το φύλλο στυλ σας στο κεφάλι του εγγράφου σας:

2. Μέσα από το επισημασμένο σχόλιο, προσθέστε ένα άλλο φύλλο στυλ με μερικά στυλ για να πάρετε το IE 6 για να παίξετε ωραίο:

3. Βεβαιωθείτε ότι έχετε δοκιμάσει και στα IE 7 και IE 8. Μπορεί να χρειαστεί να προσαρμόσετε τα σχόλια για να τα υποστηρίξετε επίσης. Ωστόσο, λειτούργησε όταν το έλεγξα.

Εντάξει - αυτό είναι σίγουρα WAY overkill. Πολύ λίγες τοποθεσίες πρέπει να υποστηρίξουν IE 7 ή 8 πια, πολύ λιγότερο IE6!

Ως εκ τούτου, αυτή η προσέγγιση είναι απαρχαιωμένη και πιθανόν περιττή για εσάς. Το αφήνω εδώ περισσότερο ως μοντέλο περιέργειας για το πόσο πιο δύσκολα ήταν τα πράγματα πριν όλα τα προγράμματα περιήγησής μας έπαιζαν τόσο όμορφα μαζί!

Αντιμετωπίζοντας μια εικόνα τεντωμένου φόντου πάνω από μικρότερο χώρο

Μπορείτε να χρησιμοποιήσετε μια παρόμοια τεχνική για να πλαστογραφήσετε μια εικόνα τεντωμένου φόντου σε ένα DIV ή άλλο στοιχείο στην ιστοσελίδα σας. Αυτό είναι λίγο πιο δύσκολο καθώς πρέπει είτε να χρησιμοποιήσετε την απόλυτη τοποθέτηση είτε να έχετε παράξενα προβλήματα διαχωρισμού για άλλα μέρη της σελίδας σας.

1. Τοποθετήστε την εικόνα στη σελίδα που θέλω να χρησιμοποιήσω ως φόντο.

2. Στο φύλλο στυλ, ορίστε πλάτος και ύψος για την εικόνα. Σημειώστε ότι μπορείτε να χρησιμοποιήσετε ποσοστά για το πλάτος ή το ύψος, αλλά θεωρώ πιο εύκολο να προσαρμόσετε τις τιμές μήκους για το ύψος.

   img # bg {
   πλάτος: 20εκ.
   ύψος: 30εμ.
   }}

3. Τοποθετήστε το περιεχόμενό σας σε ένα διαζύγιο με την ταυτότητα "περιεχόμενο" όπως κάναμε παραπάνω:

   Όλο το περιεχόμενό σας εδώ

4. Στυλ το περιεχόμενο div να είναι το ίδιο πλάτος και ύψος με την εικόνα φόντου:

   div # περιεχόμενο {
   πλάτος: 20εκ.
   ύψος: 30εμ.
   }}

5. Στη συνέχεια, τοποθετήστε το περιεχόμενο στο ίδιο ύψος με την εικόνα. Έτσι αν η εικόνα σας είναι 30em θα έχετε ένα ύφος κορυφής: -30em; Μην ξεχάσετε να βάλετε ένα z-index του 1 για το περιεχόμενο.

   #content {
   θέση: σχετική.
   κορυφή: -30em;
   z-δείκτης: 1;
   πλάτος: 20εκ.
   ύψος: 30εμ.
   }}

6. Στη συνέχεια, προσθέστε ένα z-δείκτη -1 για χρήστες IE 6, όπως κάνατε παραπάνω:

Και πάλι, με το μέγεθος του παρασκήνιου που απολαμβάνει την ευρεία υποστήριξη του προγράμματος περιήγησης που κάνει τώρα, αυτή η προσέγγιση είναι επίσης πολύ πιθανό περιττή και παρουσιάζεται ως προϊόν μιας περασμένης εποχής. Εάν θέλετε να χρησιμοποιήσετε αυτήν την προσέγγιση, απλά φροντίστε να το δοκιμάσετε σε όσο το δυνατόν περισσότερους browsers.

Και αν το περιεχόμενό σας αλλάξει το μέγεθος, θα χρειαστεί να αλλάξετε το μέγεθος του κοντέινερ σας και την εικόνα φόντου, αλλιώς θα καταλήξετε με παράξενα αποτελέσματα.