Πώς να χρησιμοποιήσετε μια εικόνα φόντου για το ιστολογιό σας

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



  Μπορείτε να χρησιμοποιήσετε σχεδόν κάθε εικόνα ως background για το ιστολόγιό σας.
Συνήθως εικόνες φόντου είναι σε μορφή JPEG, αν και θα μπορούσατε επίσης να χρησιμοποιήσετε εικόνες σε μορφή GIF ή BMP .
Ωστόσο, θα πρέπει να φιλοξενήσετε την εικόνα σε έναν εξωτερικό διακομιστή, το Blogger φιλοξενεί μόνο τις εικόνες που περιέχονται σε widgets ή σε αναρτήσεις . Αν ψάχνετε για δωρεάν φιλοξενία εικόνας, ρίξτε μια ματιά σε αυτή την ανάρτηση .
Πριν ξεκινήσετε να προσθέσετε την εικόνα φόντου στο blog σας , πρώτα  βρείτε την εικόνα που θέλετε να χρησιμοποιήσετε και σημειώστε το url της εικόνας .
Όπως αναφέρεται στην εισαγωγή, υπάρχουν διαφορετικοί τρόποι που μπορείτε να χρησιμοποιήσετε εικόνες background . Εδώ θα σας τα εξηγήσω:

• Πώς να κάνετε  επανάληψη εικόνας σε όλη την σελίδα (σαν ταπετσαρία)
• Πώς να κάνετε επανάληψη εικόνας background κάθετα , προς το κάτω μέρος της σελίδας
• Πώς να κάνετε επανάληψη εικόνας background οριζοντίως σε όλη τη σελίδα
• Πώς να δημιουργήσετε μια σταθερή εικόνα εικόνας background   (η οποία δεν μετακινείτε με το υπόλοιπο της σελίδας )

Όλες αυτές οι μέθοδοι είναι δυνατόν να γίνουν στο Blogger Blogs, και είναι αρκετά απλά στη εφαρμογή

Πώς να κάνετε επανάληψη εικόνας background σε όλη την σελίδα (σαν ταπετσαρία)

Αυτή είναι η απλούστερη εφαρμογή όλων των background effects . Οι περισσότεροι άνθρωποι προτιμούν να χρησιμοποιούν μια μικρή εικόνα , η οποία θα εφαρμοστεί σε όλη την σελίδα ομαλά  . Αυτό εξασφαλίζει ότι η σελίδα θα φορτώνει πιο γρήγορα , δεδομένου ότι η εικόνα που χρησιμοποιείτε έχει  μικρό μέγεθος .
Μπορείτε να βρείτε εύκολα τέτοιες εικόνες φόντου για σας κάνοντας μια Αναζήτηση στο Google για tileable backgrounds , Ή θα μπορούσατε να δημιουργήσετε ακόμη και τη δική σας.
Διάλεξα αυτή την απλή εικόνα για να την χρησιμοποιήσω ως παράδειγμα, αν και θα μπορούσα εξίσου εύκολα να χρησιμοποιήσω οποιαδήποτε άλλη εικόνα :

 

Για να κάνετε αυτή την εικόνα tileable background για το ιστολόγιό σας, πηγαίνετε
Διάταξη > Επεξεργασία html και αναζητήστε τις ιδιότητες στυλ για το “ body “ του blog σας, το οποίο θα πρέπει να είναι κάτι σαν το παρακάτω παράδειγμα:
                                                                                                                                                    

body {
background: $bgcolor;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}



Πρέπει να επεξεργαστείτε τη γραμμή με έντονους κόκκινους χαρακτήρες , αυτή η γραμμή δηλώνει τις ιδιότητες φόντου ( background ) του blog.
Για να προσθέσετε μια επανάληψη εικόνας background,  απλά προσθέστε τις ακόλουθες γραμμές (επισημαίνονται με κόκκινο χρώμα) στις ιδιότητες “ body “ :


body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
 
Όπου το URL , εισάγετε το URL της εικόνας φόντου που θα χρησιμοποιήσετε στο blog σας.
Αυτό θα κάνει την επανάληψη εικόνας background  σε ολόκληρη την σελίδα, δείτε εδώ για  παράδειγμα:

Πώς να κάνετε επανάληψη εικόνας background κατακόρυφα , προς το κάτω μέρος της σελίδας

Αυτό συνεπάγεται με μια ελαφρώς διαφοροποίηση του κώδικα , αλλά είναι ουσιαστικά η ίδια αρχή. Και πάλι θα πρέπει να βρείτε το στυλ  "body"  στο πρότυπό σας και να προσθέσετε το url για την εικόνα φόντου σας. Επίσης, θα πρέπει να δηλώσετε ότι το φόντο θα επαναληφθεί στον " y " ( κάθετο ) άξονα, όπως στο παρακάτω παράδειγμα:

body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat-y;
margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


Επειδή η επανάληψη θα γίνει κατακόρυφα θα χρησιμοποιήσουμε μια εικόνα διαστάσεων
1280 x 630 όπως η εικόνα παρακάτω :

 

Απλά κοιτάμε το φάρδος τις εικόνας να είναι όσο είναι και το φάρδος του  blog μας .
( κοιτάξτε εδώ για μια πλήρη επισκόπηση σελίδας ):

Πώς να κάνετε επανάληψη εικόνας φόντου οριζοντίως σε όλη τη σελίδα

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

body {
background:url(http://www.χχχ.com/εικονα.jpg) repeat-x;margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}


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

Μας ενδιαφέρει το ύψος τις εικόνας να είναι όσο είναι το ύψος του blog μας .

Πώς να δημιουργήσετε ένα σταθερό υπόβαθρο εικόνας ( background  )

Συνήθως μια μεγαλύτερη εικόνα χρησιμοποιείται για τη μέθοδο αυτή .
Για να εξασφαλιστεί ότι αυτή την εικόνα φόντου δεν θα επαναληφθεί , εφόδων είναι μεγάλων διαστάσεων , θα πρέπει να προστεθεί η δήλωση " no-repeat "   για τις ιδιότητες φόντου .
Επίσης, πρέπει να προστεθεί η δήλωση ότι το background attachment  είναι  fixed , έτσι ώστε το φόντο να μην κινείται με τη σελίδα. Και εδώ είναι ένα παράδειγμα το πως  πρέπει να μοιάζει ο κώδικας  , με τις αλλαγές που επισημαίνονται με κόκκινο χρώμα:

body {
background:url(http://www.χχχ.com/εικονα.jpg) no-repeat;margin:0;
color:$textcolor;
font:x-small Arial sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
background-attachment: fixed }


Και εδώ θα δείτε το παράδειγμα (χρησιμοποιήστε αυτό το link για μια πλήρη προεπισκόπηση  σελίδας)

Εδώ χρησιμοποίησα μια εικόνα με διαστάσεις 1260 x 257 , δείτε την παρακάτω :



Και επειδή η συγκεκριμένη εικόνα είναι στο ύψος 257 px , τροποποίησα λιγάκι τον παραπάνω κώδικα και πρόσθεσα την μεταβλητή repeat-y , γιατί θέλω την επανάληψη να γίνει κατακόρυφα . 

Μπορείτε επίσης να προσθέσετε και χρώμα  !

Αν δεν κάνετε επανάληψη της εικόνας φόντου σας σε όλη τη σελίδα, μπορεί να μείνει ένα κενό με λευκές περιοχές . Για να καλύψετε αυτές τις περιοχές με το χρώμα της επιλογής σας , θα πρέπει επίσης να προσθέσετε χρώμα στο background σας .
Χρησιμοποιώντας Hex τιμές για το χρώμα που θέλετε να εμφανίσετε. μπορείτε να δείτε εδώ για όλες τις hex τιμές που  απαιτούνται .Εδώ είναι ένα παράδειγμα του πώς μπορείτε να προσθέσετε τις  hex τιμές για το χρώμα στο φόντο σας:
  background: #ff0000 url(http://www.χχχ.com/εικονα.jpg) repeat-x;
 

Τοποθεσία της εικόνα φόντου

Από προεπιλογή, η εικόνα φόντου θα αρχίσει από την επάνω αριστερή γωνία της σελίδας, ανεξάρτητα από το αν θέλετε η εικόνα φόντου να επαναληφτεί (ή μη) σε ολόκληρη τη σελίδα. Ωστόσο, μπορείτε να καθορίσετε που θέλετε να τοποθετηθεί η εικόνα που πρόκειται να χρησιμοποιήσετε , με την προσθήκη ορισμένων επιπλέον μεταβλητών  στις προδιαγραφές background .
Εδώ είναι ένα παράδειγμα πως χρησιμοποιούμε τους positioning variables:


background: #ffff00 url(http://www.χχχ.com/εικονα.jpg) positioning-variables-bottom right no-repeat;
 
 
Και εδώ είναι μια λίστα των positioning variables που μπορείτε να χρησιμοποιήσετε:

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

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

background; url(http://www.χχχ.com/εικονα.jpg) no-repeat top center;

Ελπίζω ότι αυτή η ανάρτηση να σας έχει βοηθήσει να κατανοήσετε πώς να χρησιμοποιείτε εικόνες φόντου στο blog σας, και να καλύπτει όλες τις πτυχές του πώς αυτά τα διαφορετικά αποτελέσματα μπορούν να επιτευχθούν.
Όπως πάντα, θα εκτιμούσα  πάρα πολύ τα σχόλια και τις απόψεις σας !
 
Οι εικόνες από createblog.com