background image in html

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

background image in html

Δημοσίευση από katerina28 » 27 Φεβ 2009 17:01

θα ήθελα σε ένα site να βάλω ένα background image jpg η gif το οποιο ειναι gradient image
και θέλω μέσα σε ένα κελί στην html να εμφανίζεται είναι ορθογώνιο το έχω κόψει από πάνω προς τα κάτω with 3x500 he με τι κώδικα και πως θα το βάλω μέσα στο κελί για να καλύψει όλο το πλάτος του κελιού για να το εμφανίζει και πιο γρήγορα,δεν ξέρω αν μέσα από το dreamwaver γίνεται η θέλει να γίνει με css,κάποια βοήθειά σας παρακαλώ?
σαν image τι προτείνετε εσείς να είναι jpg or gif απ την στιγμή που αυτό θα είναι gradient?

Άβαταρ μέλους
patriot
Honorary Member
Δημοσιεύσεις: 1590
Εγγραφή: 20 Αύγ 2002 19:21
Τοποθεσία: Σπίτι μου!

background image in html

Δημοσίευση από patriot » 27 Φεβ 2009 19:36

1) Να είναι jpg. Όποιο image έχει ποοοοολλλάάάά χρώματα, δηλ πάνω από 256, τότε το κάνουμε jpg. Ένα gradient image που αλλάζει το κάθε pixel του, έχει χιλιάδες χρώματα, άρα jpg.

2) Στο css αρχείο γράψε:
body {background-image:url("gradient.jpg)";}
....για το body..... Και για το cell γράψε:
td {background-image:url("orthogonio.jpg)";}
EDIT// Ξέχασα... είναι καλή ιδέα, μιας και είναι ένα μικρό image-άκι (1pixel X οσο υψος θες) να το κάνεις png, δηλ να το έχεις ασυμπίεστο. Ένα αρχείο png είναι ένα ασυμπίεστο αρχείο. Άρα φαίνεται ομορφότερο χωρίς τα άχρηστα pixels που το χαλάνε. Όμως είναι ποιο βαρύ σε κώδικα. Στην προκειμένη περίπτωση όμως δεν μας νοιάζει γιατι ο image είναι μικρό. Αν ήταν μεγαλύτερο δεν θα μας έκανε το png...
1) Για όποιον γράφει με πολυτονικά....
2) Καλά ακόμα να συνηθίσετε την ιδέα ότι δεν γράφουμε ούτε με greeklish ούτε με κεφαλαία;

Άβαταρ μέλους
Theodoros Klikas
Δημοσιεύσεις: 27
Εγγραφή: 26 Δεκ 2008 06:12
Επικοινωνία:

background image in html

Δημοσίευση από Theodoros Klikas » 27 Φεβ 2009 19:51

Να συμπληρώσω και κάτι σε αυτά που είπε ο patriot, σε περίπτωση που το body σου έχει μεγαλύτερο πλάτος απ' την εικόνα σου, αντί να κάνεις την εικόνα μεγαλύτερη σε πλάτος , μπορείς να έχεις μια μικρή εικόνα που να επαναλαμβάνεται στον άξονα των x(και φορτώνει και πολύ γρηγορότερα). Για να το κάνεις αυτό (αν η εικόνα σου το επιτρέπει,γιατί με μερικά gradients μπορεί να μη φαίνεται καλό) γράψε στο css σου

body {
background-image:url("gradient.jpg");
background-repeat: repeat-x; <--- εδώ είναι η επανάληψη στον άξονα των x
}

και για το κελί

td {
background-image:url("orthogonio.jpg");
background-repeat: repeat-x;
}

γενικά το "κολπάκι" με την μικρή εικόνα που καλύπτει μεγαλύτερο μέγεθος μπορείς να το κάνεις και στον y άξονα με repeat-y αντι για repeat-x και δίνει ωραίο αποτέλεσμα για gradients που είναι απο κάτω προς τα πάνω ή το αντίστροφο στο repeat-x και για gradients που είναι απο αριστερά προς τα δεξιά ή το αντίστροφο στο repeat-y. Δεν είναι για να το χρησιμοποιείς πχ αν έχεις ένα gradient που σβήνει διαγώνια...παίξε λίγο μ αυτό και θα δεις.
Απο τότε που πέρασα σε σχολή σχετική με πληροφορική το "γειά σου" απο τους φίλους μου αντικαταστάθηκε με το "εεε...τι κάνεις?έχω ένα πρόβλημα με το pc μου.."

katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

background image in html

Δημοσίευση από katerina28 » 27 Φεβ 2009 22:22

Σας ευχαριστώ πολύ για τις σύντομες απαντήσεις άλλα κολλάω εδώ

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


<TD COLSPAN=3>&nbsp; </TD>
</TR>
<TR bgcolor="#D5TSDF">
<TD COLSPAN=3><p>&nbsp;</p>
<p>ΣΕ ΑΥΤΟ ΤΟ ΣΗΜΕΙΟ ΘΕΛΩ ΝΑ ΕΜΦΑΝΙΣΤΕΙ ΤΟ GRADIENT&nbsp; </p></TD>
</TR>
</TABLE>
</BODY>
</HTML>


ΣΤΟ ΔΕΥΤΕΡΟ TD COLSPAN=3>ΑΛΛΑ ΔΕΝ ΕΜΦΑΝΊΖΕΤΑΙ τι κάνω λάθος?

αυτο στην html
<link rel="stylesheet" href="test.css" type="text/css" />

και το css td {
background-image:url(../top/header/bg.jpg);
background-repeat: repeat-x;
}
το αρχειο css το εχω μεσα σε φακελο css/test.css στο site
ΔΕΝ ΕΜΦΑΝΊΖΕΤΑΙ τι κάνω λάθος?

Άβαταρ μέλους
Theodoros Klikas
Δημοσιεύσεις: 27
Εγγραφή: 26 Δεκ 2008 06:12
Επικοινωνία:

background image in html

Δημοσίευση από Theodoros Klikas » 27 Φεβ 2009 23:03

katerina ο κώδικας που σου έγραψα και απ' οτι βλέπω τον έγραψες στο css σου , βάζει background την εικόνα σε όλα τα TD, όχι όμως και σε όλα τα <p> :wink:
Αφού απ' οτι βλέπω το background θέλεις να μπει μέσα σ'ένα <p> στον κώδικα που έδωσες,υπάρχουν 2 περιπτώσεις :

1) Αν το background θέλεις να μπαίνει σε ΟΛΑ τα <p> που είναι μέσα σε <TD> θα πάς στο css και θα γράψεις επίσης:

td .p {
background-image:url("../top/header/bg.jpg");
background-repeat:repeat-x;
}

2) Aν το background θέλεις να εμφανιστεί ΜΟΝΟ σε αυτό το <p> τότε στο css θα γράψεις επίσης :

p. otinanai {
background-image:url("../top/header/bg.jpg");
background-repeat:repeat-x;
}

και στον κώδικα html θα γράψεις:

</TR>
<TD COLSPAN=3>&nbsp; </TD>
</TR>
<TR bgcolor="#D5TSDF">
<TD COLSPAN=3><p>&nbsp;</p>
<p class="otinanai">ΣΕ ΑΥΤΟ ΤΟ ΣΗΜΕΙΟ ΘΕΛΩ ΝΑ ΕΜΦΑΝΙΣΤΕΙ ΤΟ GRADIENT&nbsp; </p></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Φυσικά αντί για otinanai μπορείς να βάλεις κάτι άλλο, οτι θες ... :P
Δοκιμασε το και μου λες... :pint:
Απο τότε που πέρασα σε σχολή σχετική με πληροφορική το "γειά σου" απο τους φίλους μου αντικαταστάθηκε με το "εεε...τι κάνεις?έχω ένα πρόβλημα με το pc μου.."

katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

background image in html

Δημοσίευση από katerina28 » 27 Φεβ 2009 23:18

Theodoros Klikas ευχαριστώ πολύ θα το κάνω και αυτό να δω τι κάνω λάθος,πάντως αυτό που θέλω είναι το bg να μπει μόνο σε αυτό
<TD COLSPAN=3><p>&nbsp;</p>
<p>ΣΕ ΑΥΤΟ ΤΟ ΣΗΜΕΙΟ ΘΕΛΩ ΝΑ ΕΜΦΑΝΙΣΤΕΙ ΤΟ GRADIENT&nbsp; </p></TD>
</TR>
</TABLE>
</BODY>
</HTML>

πιστεύω να κατάλαβες ότι το θέλω μόνο σε ένα κελί στο δεύτερο <TD COLSPAN=3><p>&nbsp;</p>

θα κάνω μια δοκιμή και σε αυτό που έγραψες.

Άβαταρ μέλους
Theodoros Klikas
Δημοσιεύσεις: 27
Εγγραφή: 26 Δεκ 2008 06:12
Επικοινωνία:

background image in html

Δημοσίευση από Theodoros Klikas » 28 Φεβ 2009 00:53

Τότε katerina δοκίμασε τον δεύτερο τρόπο...αυτός θεωρώ πως σου κάνει... :pint:
Απο τότε που πέρασα σε σχολή σχετική με πληροφορική το "γειά σου" απο τους φίλους μου αντικαταστάθηκε με το "εεε...τι κάνεις?έχω ένα πρόβλημα με το pc μου.."

katerina28
Δημοσιεύσεις: 201
Εγγραφή: 16 Δεκ 2007 22:14

background image in html

Δημοσίευση από katerina28 » 28 Φεβ 2009 10:54

ούτε αυτό δουλεύει γιατί?Τι κάνω λάθος

p. otinanai {
background-image:url("../top/header/bg.jpg");
background-repeat:repeat-x;
}

και στον κώδικα html θα γράψεις:

</TR>
<TD COLSPAN=3>&nbsp; </TD>
</TR>
<TR bgcolor="#D5TSDF">
<TD COLSPAN=3><p>&nbsp;</p>
<p class="otinanai">&nbsp; </p></TD>
</TR>
</TABLE>
</BODY>
</HTML>

ΥΓ. Δεν το θέλω σαν background image πίσω από την σελίδα, άλλα μέσα σε ένα κελί.

τελικά δούλεψε με αυτό που ανέφερε ο patriot σας ευχαριστώ πολύ.

Άβαταρ μέλους
Theodoros Klikas
Δημοσιεύσεις: 27
Εγγραφή: 26 Δεκ 2008 06:12
Επικοινωνία:

background image in html

Δημοσίευση από Theodoros Klikas » 28 Φεβ 2009 19:25

Μάλλον Katerina είχε να κάνει με το γεγονός οτι το <p> βρισκόταν μέσα σε <td> , αρα στον κώδικα που σου έδωσα λάμβανε υπόψιν το στυλ του <td>, αρα ο κώδικας απο patriot ήταν ο σωστός στην περίπτωση αυτή, όπως και να χει i m glad you figured it out :D :pint:
Απο τότε που πέρασα σε σχολή σχετική με πληροφορική το "γειά σου" απο τους φίλους μου αντικαταστάθηκε με το "εεε...τι κάνεις?έχω ένα πρόβλημα με το pc μου.."

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες