jpg photo as background

[geioann]

Καλησπερα σας!

 

Θελω να βαλω μια φωτογραφια σαν background στην αρχικη σελιδα του site μου.Δεν ξερω ομως πώς και αν γινεται να κανω την φωτογραφια να προσαρμοζεται σε καθε οθονη.Για παραδειγμα την προσαρμοζω σωστα στην δικη μου οθονη αλλα σε μικροτερη οθονη κοβεται η φωτογραφια. Σε μεγαλυτερη οθονη επαναλαμβανεται καποιο κομματι της φωτογραφιας!

 

 

Σιγουρα καποιος τροπος υπαρχει...Σας ευχαριστω εκ των προτερων για την οποια βοηθεια σας!

 

 

Υ.Γ.Αν καποιος θελει να δει το site θα του το στειλω με pm, ειναι online!

[defacer]

Αν το έχεις κάνει με CSS (background-image κλπ) τότε δεν γίνεται παρά μόνο στο περίπου και με πολύ κόπο εκ μέρους σου (γίνεται να μην επαναλαμβάνεται η φωτογραφία προσθέτοντας no-repeat αλλά μέχρι εκεί ήταν τα εύκολα).

 

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

[TheELF]

Και με CSS να το έκανε, που ο κόπος να το σβήσει από το css και να βάλει τον παρακάτω κώδικα στην αρχή της σελίδας μέσα στο <style>, μόνο στην σελίδα όπου θέλει να προσαρμόζεται η εικόνα στην σελίδα.

 

π.χ.

 

>
<style type="text/css">
html
{
    background: url(πλήρες διεύθηνση εικόνας) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
</style>

πιάνει σε όλους τους κεντρικούς browser.

[defacer]

Δεν πιάνει σε ΙΕ < 9 και είναι ακόμα candidate recommendation και όχι standard (άρα υπάρχει περίπτωση να αλλάξει στο μέλλον "χωρίς προειδοποίηση").

 

Αν αυτά δεν είναι προβλήματα για τον topic starter τότε όντως είναι η τέλεια λύση.

[geioann]

Βασικα δεν ξερω και πολλα...Εχω ενα αρχειο html και ενα αρχειο css που το περναω στο html αρχειο ως εξης :

 

<link rel="stylesheet" href="intro.css" type="text/css" media="screen" />

 

Το κομματι κωδικα πως θα το βαλω μεσα? Και το γραφω ακριβως οπως μου το εδωσες (περα απο το ονομα του jpg) ή πρεπει να αλλαξω κατι? Εννοω ακομα και καποιες παυλες ή τελειες!

[TheELF]

κάτω από αυτήν την γραμμή βάλε

<style>

κάνε αντιγραφή των κώδικα χωρίς τα style που έχει τώρα

</style>

[geioann]

Κατω απο το <link rel="stylesheet" href="intro.css" type="text/css" media="screen" /> στο HTML αρχειο βαζω το παρακατω??

 

<style>

 

{

background: url(test3.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

</style>

 

Δεν γινεται τιποτα. Ασε που το κομματι του κωδικα παραμενει μαυρο, σαν απλο κειμενο. Το δουλευω σε Notepad++ και θα επρεπε να δινει χρωματα!

[TheELF]

Πάει έτσι:

>
<style>
html
{
 background: url(http://.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}
</style>

ξέχασες να βάλεις το αρχικό html και το όνομα της εικόνας πρέπει να έχει και την διεύθυνση π.χ. url(http://o_server_mou/kapoioa_eikona.jpg)

[defacer]

Και δεν το βάζεις καλύτερα μέσα στο intro.css απλά;

[geioann]

Ok δουλεψε αλλα... εχω αλλο προβλημα τωρα! Η φωτογραφια του background μενει καρφωμενη στην οθονη και οταν μετακινω το μικρο καθετο scroll bar που προυπηρχε μετακινουνται μονο τα γραμματα,logo κλπ που εχω στην αρχικη σελιδα!

 

θελω να μετακινειται και το background μαζι!

[TheELF]

Πολλά θέλεις

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

Δώσε λινκ ή τον κώδικα της σελίδας,κάποιος που ξέρει καλύτερα μπορεί να σε βοηθήσει.

[geioann]

Εσβησα το center fixed; απο την πρωτη γραμμη κωδικα και ειναι οκ , μετακινουνται ολα μαζι τωρα οπως το ηθελα! Εκανα καλα?

 

θα το ξανακοιταξω και αργοτερα και θα σας πω αν παρατηρω κατι αλλο!

[geioann]

Ψαχνοντας βρηκα αυτο το κομματι κωδικα:

 

 

background:url(path photo's) repeat-x #050301;

background-position: top center;

 

Για το css.Αν και δεν μπορω να "μεταφρασω" το repeat-x #050301; δειχνει να δουλευει αρκετα καλα προς αυτο που θελω!