Στο σημερινό άρθρο θα σας παρουσιάσουμε πως μπορείτε να βάλετε φόντο στην ιστοσελίδα που σχεδιάζετε με την χρήση CSS (Cascading Style Sheets). Ουσιαστικά η τεχνική που θα ακολουθήσουμε είναι απλή αλλά μπορούν να χρησιμοποιηθούν διάφορες παραλλαγές ώστε να πετύχετε το εικαστικό αποτέλεσμα που επιθυμείτε.
ΕΙΣΑΓΩΓΗ
Η φιλοσοφία στηρίζεται στην παραμετροποίηση του body tag και του background attribute οποιοδήποτε άλλου παρεμφερή στοιχείου (divs, block elements κ.α.) που φιλοξενεί περιεχόμενο στην διαδικτυακή εφαρμογή που σχεδιάζετε.
ΠΑΡΑΔΕΙΓΜΑΤΑ
1. Προσθέτοντας φόντο στο κέντρο μιας ιστοσελίδας (δείτε το παράδειγμα)
body {
background-color: #909090;
background-image: url(backimage.gif);
background-repeat: no-repeat;
background-position: center top;
}
2. Προσθέτοντας κάθετο degrade (gradient) φόντο σε μια ιστοσελίδα (δείτε το παράδειγμα)
body {
background-color: #909090;
background-image: url(backimage_gradient.gif);
background-repeat: repeat-x;
background-position: top;
}
3. Προσθέτοντας οριζόντιο degrade (gradient) φόντο σε μια ιστοσελίδα (δείτε το παράδειγμα)
body {
background-color: #909090;
background-image: url(backimage_gradient2.gif);
background-repeat: repeat-y;
background-position: top;
}
Παράμετροι
background-color = Χρώμα φόντου
background-image: Γραφικό φόντου
background-repeat: Τρόπος επανάληψης φόντου
background-position: Καθορισμός θέσεως φόντου
Το design αποτελεί έναν σημαντικό παράγοντα στην επιτυχία μιας ιστοσελίδας, μπορεί να δημιουργήσει θετικά ή αρνητικά συναισθήματα που θα διαμορφώσουν την τελική εικόνα ενός διαδικτυακού τόπου. Κάθε ιστοσελίδα πρέπει να είναι μια μοναδική εμπειρία που να μαγνητίζει οποιονδήποτε επισκέπτη.
Εκμεταλλευτείτε αυτού του είδους τεχνικές χρήσης CSS για να προσφέρετε περισσότερες εικαστικές λύσεις στους πελάτες σας, παράλληλα δίνοντας και μια ξεχωριστή αίσθηση.
May 19th, 2008 at 9:59 pm
Γιάννη σ’ ευχαριστώ πολύ για τα πολύ χρήσιμα άρθρα που γράφεις. Είμαι νέος με τα divs και αυτά που γράφεις με βοηθάνε αρκετά. Έχεις γράψει ή σκοπεύεις να γράψεις κανα άρθρο για το πως να τοποθετεί κάποιος divs και το περιεχόμενό τους σε μια σελίδα. Με μπερδεύουν λίγο αυτά τα margins κλπ. Θα σου είμουν ευγνώμων αν έγραφες κάτι τέτοιο.
Ευχαριστώ
May 21st, 2008 at 8:22 pm
Αγαπητέ φίλε,
Αρχικά να σε ευχαριστήσω για το σχόλιο σου και την συμμετοχή σου στο web design blog. Σχετικά με το θέμα που έθεσες, σίγουρα θα προβάλλουμε κάποιο άρθρο στο μέλλον το οποίο να καλύπτει το κεφάλαιο που ονομάζεται divs (layers). Θα αναλύσουμε την τοποθέτηση των divs και γενικότερα το semantic mark up ώστε να μπορείς να σχεδιάζεις ιστοσελίδες εύκολα και γρήγορα με σωστό στήσιμο σύμφωνα με τα παγκόσμια πρότυπα.
Καλή συνέχεια.
June 19th, 2010 at 9:52 pm
Φοβερά αρθράκια συνέχισε τη καλή δουλειά by the way να ρωτήσω το background-position: center top; είναι cross ; Φαίνεται το ίδιο σε όλους τους φυλλομετρητές ;