Ετικέτες HTML <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη του browser. Μερικοί λόγοι για να χρησιμοποιήσουμε σχόλια μέσα σε ένα html αρχείο είναι να γράψουμε την ημερομηνία που δημιουργήσαμε το αρχείο, ή να γράψουμε το id μιας ετικέτας κάτω από την ετικέτα τέλους ώστε να βλέπουμε με μια ματιά αν κλείνουν σωστά οι ετικέτες. Ένα σχόλιο αρχίζει με το <!-- και τελειώνει με το -->. <a>: Με την ετικέτα <a> δημιουργούμε έναν σύνδεσμο (link) προς μια άλλη σελίδα χρησιμοποιώντας την ιδιότητα href. Οι πιο σημαντικές ιδιότητες της ετικέτας είναι η href η οποία ορίζει το URL του συνδέσμου και η target η οποία ορίζει που θα ανοίξει το URL (στο ίδιο tab ή σε νέο tab). Ετικέτα τέλους: </a>. <b>: Η ετικέτα <b> εμφανίζει το κείμενο με έντονη μορφή. Το b είναι το πρώτο γράμμα από την λέξη bold. Ετικέτα τέλους: </b>. <big>: Η ετικέτα <big> εμφανίζει το κείμενο με ελαφρώς μεγαλύτερα γράμματα. Ετικέτα τέλους: </big>. <blockquote>: Η ετικέτα <blockquote> εμφανίζει το κείμενο αρχίζοντας από δεξιότερη εσοχή απ ότι το υπόλοιπο κείμενο. Ετικέτα τέλους: </blockquote>. <body>: Η ετικέτα <body> ορίζει το κυρίως περιεχόμενο της HTML σελίδας μέσα στο οποίο γράφουμε το κείμενο που θέλουμε να εμφανιστεί μαζί με τις HTML ετικέτες που το μορφοποιούν. Στην ενότητα αυτή τοποθετούμε επίσης εικόνες, video και ότι άλλο θέλουμε να εμφανιστεί στην σελίδα. Ετικέτα τέλους: </body>. <br />: Χρησιμοποιούμε την ετικέτα <br /> όταν θέλουμε να τελειώσουμε μια γραμμή κειμένου και να αρχίσουμε μια καινούργια. <caption>: Με την ετικέτα αυτή τοποθετούμε λεζάντα στον πίνακα μας. Η ετικέτα <caption> τοποθετείται αμέσως μετά την ετικέτα <table>. Μπορούμε να ορίσουμε μόνο μια λεζάντα σε κάθε πίνακα Η λεζάντα τοποθετείται επάνω από τον πίνακα με στοίχιση στο κέντρο. Ετικέτα τέλους: </caption>.
<center>: Η ετικέτα <center> εμφανίζει το κείμενο με στοίχιση στο κέντρο της οθόνης. Ετικέτα τέλους: </center>. <del>: Η ετικέτα <del> εμφανίζει το κείμενο διαγραμμένο, δηλαδή με μια γραμμή επάνω από το κείμενο. Ετικέτα τέλους: </del>. <div>: Η ετικέτα <div> ορίζει ένα τμήμα στο HTML έγγραφο. Ένα τμήμα ομαδοποιεί τα περιεχόμενα που είναι μέσα στις ετικέτες <div>...</div> ώστε να μπορούμε να ορίζουμε ένα ενιαίο στυλ (χρώμα, γραμματοσειρά, στοίχιση) με την ιδιότητα style. Συνήθως πριν και μετά το τμήμα div ο browser αφήνει μια γραμμή κενή. Ετικέτα τέλους: </div>. <em>: Η ετικέτα <em> εμφανίζει το κείμενο με πλάγιους και κάπως αχνά γραμμένους χαρακτήρες. Ετικέτα τέλους: </em>. <font>: Η ετικέτα <font> ορίζει το μέγεθος, την γραμματοσειρά και το χρώμα του κειμένου. Είναι καλό να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML. Είναι προτιμότερο να χρησιμοποιούμε στυλ (styles) αντί για την ετικέτα <font>. Ετικέτα τέλους: </font>. <form>: Με την ετικέτα <form> εισάγουμε φόρμες στην σελίδα μας. Μια φόρμα δίνει την δυνατότητα στον χρήστη να στείλει δεδομένα στον server. Ετικέτα τέλους: </form>. <h1... h6>: Οι HTML επικεφαλίδες είναι κείμενο που εμφανίζετε με μεγάλα γράμματα. Οι επικεφαλίδες ορίζονται από τις ετικέτες <h1>, <h2>, <h3>, <h4>, <h5> και <h6>. Με την <h1> ορίζουμε την μεγαλύτερη ετικέτα ενώ με την <h6> την μικρότερη. Ετικέτες τέλους: </h1>, </h2>, </h3>, </h4>, </h5>, </h6>. <head>: H ετικέτα <head> ορίζει την κεφαλή της σελίδας. Μέσα στην κεφαλή μπορούμε να προσθέσουμε ετικέτες που παρέχουν πληροφορίες στον browser για την HTML σελίδα, όπως τίτλος σελίδας, συγγραφέας, ημερομηνία δημιουργίας κ.α. Ο browser δεν εμφανίζει στην οθόνη ότι είναι γραμμένο μέσα στην κεφαλή. Ετικέτα τέλους: </head>. <hr>: Με την ετικέτα <hr> τοποθετούμε μια οριζόντια γραμμή στην σελίδα μας. Η οριζόντια γραμμή είναι ένα απλό γραφικό που μπορούμε να χρησιμοποιήσουμε στην σελίδα μας (κυρίως σαν διαχωριστικό).
<html>: Ένα αρχείο HTML αρχίζει πάντα με την ετικέτα <html>. Ετικέτες τέλους: </html>. <i>: Η ετικέτα <i> εμφανίζει το κείμενο με πλάγιους χαρακτήρες. Το i είναι το πρώτο γράμμα από την λέξη italics. Ετικέτες τέλους: </i>. <img>: Με την ετικέτα <img> εισάγουμε μια εικόνα στην σελίδα μας. <input>: Με την ετικέτα <input> εισάγουμε ένα πεδίο φόρμας στο οποίο ο χρήστης μπορεί να πληκτρολογήσει δεδομένα. <li>: Με την ετικέτα <li> προσθέτουμε γραμμές σε μια λίστα. Ετικέτα τέλους: </li>. <link>: Με την ετικέτα <link> ορίζουμε την σχέση μεταξύ του τρέχον εγγράφου με ένα εξωτερικό αρχείο φύλλου στυλ. Με αυτόν τον τρόπο μπορούμε να καθορίσουμε ένα ενιαίο στυλ για πολλαπλά HTML έγγραφα. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>. <ol>: Η ετικέτα <ol> εισάγει μια αριθμημένη λίστα στην σελίδα μας. Το ol είναι τα δύο πρώτα γράμματα από το Ordered List. Ετικέτα τέλους: </ol>. <p>: Η ετικέτα <p> ομαδοποιεί το κείμενο σε μια παράγραφο, αφήνοντας αυτόματα μια κενή γραμμή πριν την αρχή της παραγράφου και μια μετα το τέλος αυτής. Καλό είναι να αποφεύγουμε να χρησιμοποιούμε την ετικέτα αυτή όταν μπορούμε να ομαδοποιήσουμε το κείμενο με άλλες ετικέτες. Ετικέτα τέλους: </p>. <select>: Με την ετικέτα <select> εισάγουμε Λίστες Επιλογών στην σελίδα μας. Ετικέτα τέλους: </select>. <small>: Η ετικέτα <small> εμφανίζει το κείμενο με μικρούς χαρακτήρες. Ετικέτα τέλους: </small>. <strong>: Η ετικέτα <strong> εμφανίζει το κείμενο με έντονη μορφή. Ετικέτες τέλους: </strong>. <style>: Η ετικέτα <style> ορίζει ένα στυλ για την σελίδα μας. Η ετικέτα αυτή γράφεται μέσα στην ενότητα <HEAD>. Ετικέτα τέλους:.
<sub>: Η ετικέτα <sub> τοποθετεί το κείμενο σαν μαθηματική βάση, δηλαδή σε χαμηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο. Ετικέτες τέλους: </sub>. <sup>: Η ετικέτα <sup> τοποθετεί το κείμενο σαν μαθηματικό εκθέτη, δηλαδή σε ψηλότερο σημείο απ ότι βρίσκεται το υπόλοιπο κείμενο. Ετικέτες τέλους: </sup>. <table>: Με την ετικέτα <table> εισάγουμε έναν πίνακα στην σελίδα μας. Ετικέτα τέλους: </table>. <td>: Με την ετικέτα <td> ορίζουμε ένα κελί στην γραμμή ενός πίνακα. Ετικέτα τέλους: </td>. <textarea>: Με την ετικέτα <textarea> εισάγουμε Περιοχή Κειμένου στην Φόρμα μας. Στην Περιοχή Κειμένου ο επισκέπτης μπορεί να γράψει κείμενο χωρίς περιορισμό στον αριθμό των χαρακτήρων. Ετικέτα τέλους: </textarea>. <th>: Με την ετικέτα <th> ορίζουμε επικεφαλίδες σε ένα πίνακα. Το κείμενο που βρίσκετε μέσα στις ετικέτες <th> και </th> εμφανίζεται με bold χαρακτήρες. Ετικέτα τέλους: </th>. <title>: Η ετικέτα <title> ορίζει τον τίτλο μιας HTML Σελίδας. Η ετικέτα αυτή τοποθετείται στην ενότητα HEAD. Ετικέτα τέλους: </title>. <tr>: Με την ετικέτα <tr> ορίζουμε μια γραμμή του πίνακα. Μια γραμμή του πίνακα περιέχει πολλά κελιά. Ετικέτα τέλους: </tr>. <u>: Η ετικέτα <u> εμφανίζει το κείμενο υπογραμμισμένο. Είναι προτιμότερο να αποφεύγουμε την χρήση της, σύμφωνα με το πρωτότυπο της HTML. Ετικέτα τέλους: </u>. <ul>: Η ετικέτα <ul> εισάγει μια μη αριθμημένη Λίστα στην σελίδα μας. Ετικέτα τέλους: </ul>.
Παραδείγματα HTML 1. Η δομή της HTML 2. Αλλαγή του χρώματος φόντου της σελίδας Η ετικέτα <body> περιλαμβάνει την <body bgcolor="#9999ff"> ιδιότητα bgcolor με την οποία ορίζουμε Η ετικέτα body περιλαμβάνει την το χρώμα του φόντου όλης της ιδιότητα bgcolor με την οποία ορίζουμε σελίδας. το χρώμα του φόντου όλης της σελίδας </body> 3. Αλλαγή του χρώματος του κειμένου για όλη την σελίδα Η ετικέτα <body> περιλαμβάνει την <body text="red"> ιδιότητα text με την οποία ορίζουμε το Η ετικέτα body περιλαμβάνει την χρώμα του κειμένου για όλη την ιδιότητα text με την οποία ορίζουμε το σελίδα. χρώμα του κειμένου όλης της σελίδας </body> 4. Χρώμα σε όλο τον πίνακα, στην γραμμή, στο κελί Μπορούμε να βάλουμε χρώμα σε όλο Background σε όλο τον πίνακα τον πίνακα ή σε μια γραμμή του πίνακα <table border="1" bgcolor="red"> ή σε ένα κελί του πίνακα, ανάλογα που Background σε μια γραμμή του θα τοποθετήσουμε την ιδιότητα πίνακα bgcolor (δηλαδή ή στην ετικέτα <table> <table border="1"> ή στην <tr> ή στην <td>). <tr bgcolor="red"> Background σε ένα κελί του πίνακα
<table border="1"> <td bgcolor="red"> 5. Πώς μπορώ να βάλω μια εικόνα σαν φόντο στην σελίδα μου; Η ιδιότητα background της ετικέτας <body <body> ορίζει την εικόνα που θα background=../images/fill_left_td.gif> τοποθετηθεί στο φόντο της σελίδας μας. 6. Πώς μπορώ να βάλω μια εικόνα σαν φόντο σε ολόκληρο πίνακα ή σε ορισμένα κελιά αυτού; Εικόνα σαν φόντο σε όλο τον πίνακα <table width="449" height="221" border="1" cellpadding="0" cellspacing="0" background="only_logo.jpg"> Εικόνα σαν φόντο σε μια γραμμή του πίνακα <tr align="center" valign="middle" background="only_logo.jpg"> Εικόνα σαν φόντο σε ένα κελί του πίνακα <td background="only_logo.jpg"> 7. Πώς μπορώ να βάλω link σε μια εικόνα; <body> <a href="http://www.wlearn.gr" target="_blank"><img src=only_logo.jpg width="180" height="100" border="0"></a> </body> 8. Πώς εισάγουμε ένα Πεδίο Κειμένου (text field) στην Φόρμα μας; <form name="form1" method="post" action="example1.php"> Όνομα: <input type="text" name="onoma" value="πληκτρολογήστε το όνομα σας εδώ" size="35" maxlength="31"> 9. Πώς εισάγουμε ένα Πεδίο Password στην Φόρμα μας; <form name="form1" method="post" action="example6.php"> Password: <input type="password" name="kodikos" size="35" maxlength="31">
10. Πώς εισάγουμε Κουμπιά Επιλογών (radio buttons) στην Φόρμα μας; <form name="form1" method="post" action="example2.php"> <strong>φύλο</strong>: <input type="radio" name="sex" value="male" checked="checked" > Άνδρας <input type="radio" name="sex" value="female"> Γυναίκα 11. Πώς εισάγουμε Κουτιά Πολλαπλών Επιλογών (checkbox) στην Φόρμα μας; <form name="form1" method="post" action="example3.php"> <input type="checkbox" name="sports" value="1"> Αθλητισμός<br /> <input type="checkbox" name="tv" value="1"> Τηλεόραση<br /> <input type="checkbox" name="travel" value="1"> Ταξίδια<br /> <input type="checkbox" name="movies" value="1"> Κινηματογράφος 12. Πώς εισάγουμε Περιοχή Κειμένου στην Φόρμα μας; <form name="form1" method="post" action="example4.php"> Σχόλιο: <textarea name="sholio" cols="30" rows="3"> 13. Πώς εισάγουμε Λίστα Επιλογών στην Φόρμα μας; <form name="form1" method="post" action="example5.php"> Χώρες: <select name="countries"> <option value="gr" selected="selected" >Ελλάδα</option> <option value="fr">γαλλία</option> <option value="es">ισπανία</option> <option value="ge">γερμανία</option> <option value="it">ιταλία</option> <option value="ne">ολλανδία</option> <option value="po">πορτογαλία</option> <option value="uk">αγγλία</option> </select> 14. Πώς εισάγουμε το κουμπί Υποβολής της Φόρμας; <form name="form1" method="post" action="example.php"> <input>
<input> <input type="submit" name="submitfrom" value="αποστολή Στοιχείων" /> </form> Ετικέτες CSS Ορισμός των στυλ μέσα στην σελίδα: Ο πρώτος τρόπος είναι να ορίσουμε το στυλ στο τμήμα HEAD της σελίδας χρησιμοποιώντας την HTML ετικέτα <style>. body { background-color: blue; em.idiotites { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none; Ορισμός των στυλ σε εξωτερικό αρχείο: Ο δεύτερος τρόπος είναι να δημιουργήσουμε ένα εξωτερικό αρχείο στυλ με επέκταση.css στο οποίο γράφουμε τα στυλ που θέλουμε το ένα κάτω από το άλλο. Η σύνδεση του εξωτερικού αρχείου στυλ και της σελίδας HTML γίνεται με την χρήση της HTML ετικέτας <link> στο τμήμα HEAD της HTML σελίδας. Η ετικέτα <link> εισάγει στην σελίδα τα στυλ που βρίσκονται στο εξωτερικό αρχείο.css. <link type="text/css" rel="stylesheet" xhref="mystyle.css" /> Ορισμός στυλ μέσα στις ετικέτες: Μπορούμε να ορίσουμε στυλ στις ετικέτες που επιθυμούμε, χρησιμοποιώντας την κοινή ιδιότητα style της HTML. Η ιδιότητα style μπορεί να μπει σχεδόν σε όλες τις HTML ετικέτες της ενότητας <body>. <em style="font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; COLOR:
#228B22; FONT-WEIGHT: bold; TEXT-DECORATION: none;">type</em> Η γενική σύνταξη ενός στυλ αποτελείται από τρία στοιχεία: i. τον Επιλογέα, ii. iii. τις Ιδιότητες του επιλογέα και τις Τιμές των Ιδιοτήτων του επιλογέα Ο Επιλογέας συνήθως είναι μια ετικέτα της HTML στην οποία θέλουμε να εφαρμόσουμε το στυλ. Οι Ιδιότητες είναι ιδιότητες της CSS οι οποίες προσθέτουν διάφορα χαρακτηριστικά στις ετικέτες τις οποίες εφαρμόζονται τα στυλ. Μια Ιδιότητα μπορεί να έχει μια ή περισσότερες Τιμές, σύμφωνα με τους κανόνες του προτύπου της CSS. επιλογέας { ιδιότητα-1: τιμή; ιδιότητα-2: τιμή;... ιδιότητα-ν: τιμή; em { color: blue; font-family: Arial; p { font-family: "Courier New"; color: #FF3333; text-align: center; Ομαδοποίηση των Επιλογέων: Έχουμε την δυνατότητα να ορίσουμε το ίδιο στυλ για περισσότερες από μια HTML ετικέτες. Αυτό μπορούμε να το πετύχουμε τοποθετώντας στην θέση του Επιλογέα τις ετικέτες χωρίζοντας τες με κόμμα. ετικέτα1, ετικέτα2, ετικέτα3,..., ετικέτα-ν { ιδιότητα: τιμή; p,td,th { font-family: "Courier New"; color: #FF3333; text-align: center; Σύνταξη στυλ με την χρήση της ιδιότητας class στον Επιλογέα: Μπορούμε να ορίσουμε διαφορετικά στυλ για ίδιες ετικέτες χρησιμοποιώντας για Επιλογέα το
όνομα της ετικέτας μαζί με την τιμή που περιέχει η ιδιότητα class της ετικέτας. Την κοινή ιδιότητα class της HTML μπορούμε να την προσθέσουμε σε όλες τις ετικέτες δίνοντας σε αυτές ένα όνομα, της επιλογής μας, το οποίο μπορεί να χρησιμοποιηθεί σαν αναφορά σε κάποιο στυλ. ετικέτα.τιμή_της_ιδιότητας_class { ιδιότητα: τιμή; <style type="text/css"> em.idiotites { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT- DECORATION: none; em.times { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #FFA07A; font-weight: bold; TEXT- DECORATION: none; <em class="idiotites">type</em> <em class="times">disc</em>
Σύνταξη στυλ ανεξάρτητα από την ετικέτα: Στον προηγούμενο τρόπο σύνταξης, παραλείποντας το όνομα της ετικέτας στον Επιλογέα ενός στυλ με την χρήση της ιδιότητας class, το στυλ αυτό μπορεί να εφαρμοστεί σε όλες τις ετικέτες που περιέχουν στην ιδιότητα class την τιμή που αναφέρεται στον Επιλογέα..τιμή_της_ιδιότητας_class { ιδιότητα: τιμή;.keimeno12px { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none; <h1 class="keimeno12px">αυτή είναι μια επικεφαλίδα</h1> <p class="keimeno12px">αυτή είναι μια παράγραφος</p> Σύνταξη στυλ με την χρήση της ιδιότητας id: Μπορούμε να ορίσουμε στυλ για συγκεκριμένες ετικέτες της σελίδας μας οι οποίες περιέχουν την ιδιότητα id, τοποθετώντας για Επιλογέα το σύμβολο # ακολουθούμενο από την τιμή της id που θέλουμε να εφαρμοστεί το στυλ. Η κοινή ιδιότητα id της HTML ορίζει ένα μοναδικό όνομα (ταυτότητα) για ένα στοιχείο της σελίδας ώστε να μπορούμε να αναφερθούμε σε αυτό μέσα από ένα script (π.χ. JavaScript ή VBScript) ή να εφαρμόσουμε στο στοιχείο αυτό ένα στυλ με την CSS. ετικέτα#τιμή_της_ιδιότητας_id { ιδιότητα: τιμή; p#paragrafos1 { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: <p id="paragrafos1"> κείμενο μέσα στην παράγραφο paragrafos1... </p> <div id="aristero_tmhma"> Κείμενο μέσα στην
none; div#aristero_tmhma { background-color: blue; color: White; text-decoration: bold; Ή ενότητα div </div> Έχουμε επίσης την δυνατότητα, παραλείποντας το όνομα της ετικέτας πριν το σύμβολο #, να εφαρμόσουμε ένα στυλ σε κάθε ετικέτα που έχει id ίδιο με αυτό που ακολουθεί μετά το #. #paragrafos1 { font-size: 12px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: #228B22; font-weight: bold; TEXT-DECORATION: none; #paragrafos2 { font-size: 14px; FONT-FAMILY: Arial, Helvetica, sans-serif; color: red; <p id="paragrafos1"> κείμενο μέσα στην παράγραφο... </p> <div id="paragrafos2"> Κείμενο μέσα στην ενότητα div... </div> Ορισμός περισσοτέρων από ένα στυλ σε μια ετικέτα: <p class="right bold <h1 class="right
color1">αυτή είναι μια παράγραφος</p>.right { text-align: right;.bold { font-weight: bold;.color1 { color: #228B22; </style bold">αυτή είναι μια επικεφαλίδα</h1> <p class="right bold color1">αυτή είναι μια παράγραφος</p> <li class="bold color1">coffee</li> Σύνταξη στυλ για ετικέτες με συγκεκριμένη ιδιότητα και τιμή: ετικέτα[ιδιότητα_ετικέτας="τιμή"] { ιδιότητα: τιμή; input[type="text"] { background-color: yellow; color: black; text-decoration: bold; <input type="text" size="40" value="κείμενο"> Σχόλια στην CSS: Όπως στην HTML έτσι και στην CSS μπορούμε να προσθέσουμε σχόλια στον κώδικα. Ένα σχόλιο αρχίζει με /* και τελειώνει με */. Χρώμα σαν φόντο: Με την ιδιότητα background-color ορίζουμε ένα χρώμα σαν φόντο σε ένα στοιχείο της σελίδας μας. body { background-color: blue;
Εικόνα σαν φόντο: Με την ιδιότητα background-image ορίζουμε σαν φόντο μια εικόνα σε ένα στοιχείο της σελίδας μας. Εξορισμού η εικόνα θα επαναλαμβάνεται μέχρι να γεμίσει το στοιχείο. div#menu_bar { background-image: url('only_logo.jpg'); height: 100px; Εικόνα σαν φόντο επαναλαμβανόμενη μόνο οριζόντια ή μόνο κάθετα ή χωρίς επανάληψη: Όπως είπαμε η εικόνα που ορίζουμε σαν φόντο σε ένα στοιχείο, εξορισμού επαναλαμβάνεται σε όλο το στοιχείο αυτό μέχρι να το γεμίσει οριζόντια και κάθετα. Με την ιδιότητα background-repeat, μπορούμε να ορίσουμε η εικόνα να επαναλαμβάνεται μόνο οριζόντια, βάζοντας την τιμή repeat-x, ή μόνο κάθετα βάζοντας την τιμή repeat-y. Έχουμε επίσης την δυνατότητα να ορίσουμε την μη επανάληψη της εικόνας, βάζοντας την τιμή norepeat. body { background-image: url('only_logo.jpg'); background-repeat: repeat-x; Θέση της εικόνας που ορίζουμε σαν φόντο: Με την ιδιότητα backgroundposition μπορούμε να ορίσουμε την ακριβή θέση της εικόνας που ορίζουμε σαν
φόντο μέσα σε ένα στοιχείο. Οι τιμές που παίρνει η ιδιότητα αυτή είναι δύο: η πρώτη τιμή αντιστοιχεί στην οριζόντια θέση της εικόνας και η δεύτερη αντιστοιχεί στην κάθετη θέση της ίδιας εικόνας. Έτσι μ' αυτόν τον τρόπο ορίζουμε το σημείο τοποθέτησης της εικόνας μέσα στο στοιχείο. Οι τιμές που μπορεί να πάρει αυτή η ιδιότητα είναι οι εξής: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, Θέση-x Θέση-y. body { background-image: url('only_logo.jpg'); background-repeat: no-repeat; background-position: 50px 100px; Προσοχή: η ιδιότητα background-position, για να δουλέψει, προϋποθέτει την ύπαρξη της ιδιότητας background-repeat έχοντας την τιμή no-repeat. Ορισμός της εικόνας σαν σταθερό κινούμενο φόντο: Επίσης έχουμε την δυνατότητα να ορίσουμε την εικόνα σταθερή (fixed) σε σχέση με το περιεχόμενο της σελίδας όταν αυτή γίνεται scroll ή να κινείται μαζί με το περιεχόμενο (scroll). body { background-image: url('only_logo.jpg'); background-repeat: no-repeat; background-attachment: fixed; Όλες οι CSS ιδιότητες background σε μια: Προσοχή: η σειρά με την οποία πρέπει να γράφουμε τις τιμές στην ιδιότητα background είναι η εξής: background-color,
background-image, background-repeat, background-attachment, backgroundposition. body { background: green url('only_logo.jpg') no-repeat fixed right center;