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

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

Για να ορίσετε μια εικόνα ως φόντο στο Word 2007, 2010, 2013 ή 2016, πρέπει να μεταβείτε στην καρτέλα "Διάταξη σελίδας", να κάνετε κλικ στο κουμπί "Χρώμα σελίδας" εκεί και να επιλέξετε την επιλογή "Μέθοδοι συμπλήρωσης".

Εάν χρησιμοποιείτε το Word 2003, τότε για να το κάνετε αυτό πρέπει να ανοίξετε το μενού "Μορφή - Φόντο - Μέθοδοι πλήρωσης".

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

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

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

Άλλες επιλογές σχεδίασης φόντου σελίδας

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

Για να χρησιμοποιήσετε μια υφή ως φόντο, πρέπει να μεταβείτε στην καρτέλα "Υφή" και να επιλέξετε μία από τις προτεινόμενες υφές. Μπορείτε επίσης να ανεβάσετε τη δική σας υφή. Για να το κάνετε αυτό, χρησιμοποιήστε το κουμπί "Άλλη υφή".

Για να δημιουργήσετε ένα φόντο χρησιμοποιώντας ένα μοτίβο, πρέπει να μεταβείτε στην καρτέλα "Μοτίβο", να επιλέξετε ένα από τα προτεινόμενα μοτίβα και επίσης να ορίσετε το χρώμα του μοτίβου και το χρώμα του κύριου φόντου της σελίδας.

Μπορείτε επίσης να χρησιμοποιήσετε ένα ομοιόμορφο γέμισμα ενός χρώματος ως φόντο της σελίδας. Για να το κάνετε αυτό, απλά πρέπει να κάνετε κλικ στο κουμπί "Χρώμα σελίδας" στην καρτέλα "Διάταξη σελίδας" και να επιλέξετε ένα από τα προτεινόμενα χρώματα.

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

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

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

Πρώτα, αλλάξτε το χρώμα του φόντου σας, καθώς τα άτομα με αργή σύνδεση στο Διαδίκτυο δεν θα μπορούν να δουν αμέσως την εικόνα φόντου του ιστότοπου. Για λίγο, ενώ φορτώνει η εικόνα, θα μπορούν να δουν μόνο το χρώμα του ιστότοπού σας.
Εισαγάγετε την ετικέτα παράμετρος bgcolor=”*****”, όπου ***** είναι ο κωδικός χρώματος. Μπορείτε να μάθετε τα χρώματα για HTML σε οποιοδήποτε επεξεργαστής γραφικώνεπιλέγοντας την επιλογή "για τον Ιστό" ή στον ιστότοπο https://colorscheme.ru/color-names

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

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

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

Τώρα μάθετε τη θέση του αρχείου κάνοντας δεξί κλικ πάνω του, επιλέγοντας «Άνοιγμα με» και κάνοντας κλικ σε οποιοδήποτε πρόγραμμα περιήγησης που είναι εγκατεστημένο στον υπολογιστή σας.

Αντιγράψτε τη διεύθυνση από συμβολοσειρά αναζήτησηςτο πρόγραμμα περιήγησής σας.

Τώρα στην ετικέτα εισάγετε τη γραμμή:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

Αποθηκεύστε το αρχείο σας.

Ελέγξτε την ιστοσελίδα σας. Θα δείτε ότι το κείμενό σας έχει αντικατασταθεί με φόντο.

Λάβετε υπόψη ότι για χρήστες με υψηλότερη ανάλυση οθόνης, η εικόνα σας θα αντιγραφεί προς τα κάτω και προς τα δεξιά. Δεν θα φαίνεται καλά αν η εικόνα δεν είναι μονόχρωμη. Υπάρχουν ειδικές εντολές για τη διόρθωση αυτής της παραμέτρου.

• background-repeat : "Τιμή". Οι επιλογές για την τιμή σας θα μπορούσαν να είναι: "repeat-x" - επαναλαμβάνει την εικόνα φόντου σας τόσο οριζόντια όσο και κάθετα. "repeat-y" - επανάληψη μόνο κάθετα. "χωρίς επανάληψη" - η εικόνα είναι παγωμένη στη θέση της και δεν επαναλαμβάνεται. "κενό" - ολόκληρη η σελίδα θα γεμίσει με τον μέγιστο αριθμό αντιγράφων της εικόνας, τα πιο εξωτερικά θα περικοπούν. "στρογγυλό" - η ίδια επιλογή, αλλά οι άκρες της εικόνας θα κλιμακωθούν προσεκτικά.
• φόντο-συνημμένο: "Αξία". Εάν αντικαταστήσετε την ετικέτα "κύλιση" αντί της λέξης Τιμή, η εικόνα θα μετακινηθεί μαζί με τον ιστότοπο. "Fixed" - το φόντο παραμένει αμετάβλητο κατά την κύλιση.
• Μέγεθος φόντου: Τιμή Τιμή2. Εδώ οι τιμές πρέπει να λαμβάνουν μια τιμή σε pixel. Για παράδειγμα: 100px 200px. Εκτός από τα εικονοστοιχεία, γίνονται δεκτές και ποσοστιαίες τιμές. Αυτή είναι μια επιλογή για να γεμίσετε τη σελίδα με μια εικόνα. Εκτός από τους αριθμούς, μπορείτε να εισαγάγετε δύο παραμέτρους: "contain" - γεμίζει τη σελίδα με μια εικόνα κατά μήκος της μεγάλης πλευράς και "cover" - γεμίζει τη σελίδα με μια εικόνα κατά μήκος του πλάτους.

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

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

Εικόνα ως φόντο σελίδας - HTML

Ας εξετάσουμε πρώτα πώς να ορίσετε μια εικόνα φόντου σε έναν ιστότοπο χρησιμοποιώντας το χαρακτηριστικό Ιστορικόετικέτα σώμα:

Εδώ η εικόνα φόντου ορίζεται χρησιμοποιώντας το χαρακτηριστικό φόντου της ετικέτας σώματος.

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

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

Εικόνα ως φόντο σελίδας - CSS

Στο CSS, το χρώμα φόντου και η εικόνα φόντου μπορούν να οριστούν σε μία ιδιότητα Ιστορικό:

Εδώ η εικόνα φόντου ορίζεται χρησιμοποιώντας την ιδιότητα CSS φόντου.

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

Εάν θέλετε να επεκτείνετε την εικόνα φόντου στο πλήρες μέγεθος του παραθύρου του προγράμματος περιήγησης, χρησιμοποιήστε την ιδιότητα Μέγεθος φόντου: 100%;

Στο πρόγραμμα δημιουργίας ιστοτόπων Nubex, μπορείτε να χρησιμοποιήσετε μια μεγάλη εικόνα ως φόντο για οποιονδήποτε ιστότοπο και να την καρφιτσώσετε.

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

Πώς να τεντώσετε το φόντο σε όλο το πλάτος του παραθύρου;

Για να κλιμακώσετε το φόντο, χρησιμοποιήστε την ιδιότητα background-size, ορίστε την τιμή της στο 100%, τότε το φόντο θα καταλάβει ολόκληρο το πλάτος του παραθύρου του προγράμματος περιήγησης. Για παλαιότερες εκδόσεις προγραμμάτων περιήγησης, θα πρέπει να χρησιμοποιείτε συγκεκριμένες ιδιότητες με προθέματα, όπως φαίνεται στο παράδειγμα 1.

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

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

Είναι δυνατόν να δημιουργήσετε ένα κινούμενο φόντο;

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

Πρώτα πρέπει να δημιουργήσετε μια κινούμενη εικόνα Μορφή GIFγια ποιο σκοπό μπορείτε να χρησιμοποιήσετε το πρόγραμμα Adobe Photoshopή άλλο κατάλληλο για το σκοπό αυτό. Υπάρχουν επίσης βιβλιοθήκες με έτοιμα κινούμενα αρχεία που μπορούν να χρησιμοποιηθούν ως εικόνα φόντου. Στη συνέχεια, η εικόνα προστίθεται ως φόντο χρησιμοποιώντας την ιδιότητα στυλ φόντου, όπως φαίνεται στο Παράδειγμα 1.

Πώς να τοποθετήσετε μια εικόνα φόντου στην κάτω δεξιά γωνία της σελίδας;

Για τον έλεγχο της θέσης της εικόνας φόντου στη σελίδα, χρησιμοποιείται η ιδιότητα στυλ φόντου-θέση, η οποία ορίζει ταυτόχρονα τις οριζόντιες και κάθετες συντεταγμένες της εικόνας. Για να ακυρώσετε την επανάληψη μιας εικόνας φόντου, χρησιμοποιήστε την ιδιότητα background-position με την τιμή no-repeat .

Πώς μπορώ να αποτρέψω την επανάληψη του φόντου;

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

Πώς μπορώ να κάνω το φόντο να επαναλαμβάνεται μόνο κάθετα;

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

Οποιοδήποτε δωμάτιο θα φαίνεται πολύ καλύτερο εάν το πάτωμά του είναι καλυμμένο με ένα ακριβό περσικό χαλί. Γιατί λοιπόν ο ιστότοπός σας είναι χειρότερος; Ίσως ήρθε η ώρα να «καλύψετε» το πάτωμά του με ένα ακριβό, κομψό χειροποίητο χαλί. Ας ρίξουμε μια πιο προσεκτική ματιά στον τρόπο δημιουργίας φόντου για έναν ιστότοπο:

Φόντο για την τοποθεσία

Συμβαίνει αυτό παλιό σχέδιοΈχω βαρεθεί ήδη το site. Και θέλω κάτι νέο και νόστιμο. ΕΝΑ νέο σχέδιοέτσι θα είναι αν το μαγειρέψετε με τα χέρια σας.

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

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

Τα βασικά της εργασίας με φόντο σε html

Πολλά στοιχεία μπορούν να χρησιμοποιηθούν ως φόντο:

• Χρώμα;
• Εικόνα φόντου;
• Εικόνα υφής.

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

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

Υπόβαθρο ιστότοπου #55D52B

Εκτός από τον δεκαεξαδικό χρωματικό κώδικα, υποστηρίζεται μια τιμή σε μορφή λέξης-κλειδιού ή RGB. Παραδείγματα:

Ιστοσελίδα φόντου rgb(23,113,44)

Ιστοσελίδα πράσινο φόντο

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

Η HTML υποστηρίζει μόνο 16 λέξεις-κλειδιά για να ορίσετε χρώματα. Εδώ είναι μερικά από αυτά: λευκό, κόκκινο, μπλε, μαύρο, κίτρινοκαι άλλοι.

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

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

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

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

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

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

Ίσως τέσσερα χαμογελαστά άλογα με φτερά να είναι υπερβολική έμπνευση για τους ποιητές. Επομένως, απαγορεύουμε την κλωνοποίηση του Πήγασου μας. Αυτό το κάνουμε χρησιμοποιώντας την ιδιότητα background-repeat. Πιθανές τιμές:

• repeat-x – επαναλάβετε την εικόνα φόντου οριζόντια.
• επανάληψη-y – κάθετα.
• επανάληψη – και στους δύο άξονες.
• μη επανάληψη – η επανάληψη απαγορεύεται.

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

Αλλά, φυσικά, θα ήταν καλύτερα το φυλλάδιο μας να βρισκόταν στη μέση της οθόνης. Η ιδιότητα background-position προορίζεται ακριβώς για την τοποθέτηση της εικόνας φόντου στη σελίδα. Μπορείτε να ορίσετε τις συντεταγμένες τοποθεσίας με διάφορους τρόπους:

• Λέξη-κλειδί ( πάνω, κάτω, κέντρο, αριστερά, δεξιά);
• Ποσοστό – η μέτρηση ξεκινά από την επάνω αριστερή γωνία.
• Σε μονάδες μέτρησης (pixel).

Ας χρησιμοποιήσουμε την απλούστερη επιλογή κεντραρίσματος:

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

• πάπυρος;


• σταθερός.

Χρειαζόμαστε την τελευταία τιμή. Τώρα ο κώδικας του παραδείγματος μας θα μοιάζει με αυτό:

Ιστοσελίδα υφή φόντου

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

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

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