Εκμάθηση μεγέθους εικόνας φόντου CSS - Πώς να κωδικοποιήσετε μια εικόνα φόντου πλήρους σελίδας

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

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

Κάλυψη θύρας προβολής με εικόνα

Πρώτον, θα θέλαμε να βεβαιωθούμε ότι η σελίδα μας καλύπτει πραγματικά ολόκληρη τη θύρα προβολής:

html { min-height: 100%; }

Στο εσωτερικό html, θα χρησιμοποιήσουμε την background-imageιδιότητα για να ορίσουμε την εικόνα:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Μαγεία της ιδιότητας «Background-Size»

Η μαγεία συμβαίνει με την background-sizeιδιοκτησία:

background-size: cover;

coverλέει στο πρόγραμμα περιήγησης να βεβαιωθεί ότι η εικόνα καλύπτει πάντα ολόκληρο το κοντέινερ, σε αυτήν την περίπτωση html. Το πρόγραμμα περιήγησης θα καλύψει το κοντέινερ ακόμα κι αν πρέπει να τεντώσει την εικόνα ή να κόψει λίγο από τις άκρες.

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

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

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

Το πρόγραμμα περιήγησης μπορεί επίσης να επιλέξει να εμφανίσει την εικόνα φόντου σας ως πλακίδια ανάλογα με το μέγεθός του. Για να μην συμβεί αυτό, χρησιμοποιήστε no-repeat:

background-repeat: no-repeat;

Για να διατηρήσουμε τα πράγματα όμορφα, θα διατηρήσουμε την εικόνα μας στο κέντρο:

background-position: center center;

Αυτό θα κεντράρει την εικόνα τόσο οριζόντια όσο και κάθετα ανά πάσα στιγμή.

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

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Πώς να διορθώσετε μια εικόνα στη θέση της κατά την κύλιση

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

background-attachment: fixed;

Μπορείτε να συμπεριλάβετε όλες τις ιδιότητες φόντου που περιγράφονται παραπάνω χρησιμοποιώντας σύντομη σημείωση:

background: url(image.jpg) center center cover no-repeat fixed;

Προαιρετικά: Πώς να προσθέσετε ένα ερώτημα πολυμέσων για κινητά

Για να προσθέσετε λίγο κερασάκι στην τούρτα, ίσως θελήσετε να προσθέσετε ένα ερώτημα πολυμέσων για μικρότερες οθόνες:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

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

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

Θέλετε να δείτε περισσότερες συμβουλές και γνώσεις για την ανάπτυξη Ιστού;

  • Εγγραφείτε στο εβδομαδιαίο ενημερωτικό δελτίο μου
  • Επισκεφτείτε το ιστολόγιό μου στο 1000 Mile World
  • Ακολούθησέ με στο τουίτερ