Εμφάνιση εικόνας template background;

[xenios]

Καλησπέρα σε όλους, θα ήθελα τι γνώμη όσον διαβάσουν αυτό το θέμα, σχετικά με το τι background θα μπορούσαν χρησιμοποιήσω για να ομορφήνω την σελίδα μου.

Έχω κάνει άπειρες δοκιμές και έχω λιγάκι κολλήσει γιαυτό ζητάω προτάσεις, ίσως επίσης να μην χρειάζεται background αλλά ένα απλό χρώμα, καλοδεχούμενα όλα!

http://www.ikaria.gr/demo.html

[babis1]

κατ αρχην οτι και να βαλεις καλο ειναι να εχουν μικρο μεγεθος, στην τωρινη σου κατασταση μονο η background image ειναι 203 kb, τωρα οσον αφορα το συγκεκριμενο γνωμη μου ειναι να μην χρησιμοποιουνται bg images

[xenios]

Στοχεύω στην εμφάνιση όχι στις ιδιοτήτες, δηλαδή αν σου αρέσει αυτή η εικόνα! Δεν το διευκρίνισα...

[babis1]

τι να σου πω γουστα ειναι αυτα, παντως εγω γενικα αποφευγω να βαζω background images, εχω χρησιμοποιησει κατα καιρους αλλα στο στυλ που επισυναπτω

[datahell]

Η βάλε κάτι απαλό, ή αν θες να κάτι κάτι ξεχωριστό βάλε μία εικόνα της Ικαρίας stretched όπως εδώ: http://ringvemedia.com/
Με το css3 μπορείς να χρησιμοποιήσεις το "background-size" που κάνει την δουλειά πολύ εύκολη.
Μόνο πρόσεξε η εικόνα να μην είναι πολύ μεγάλη σε kb

tip
μπορείς να την φορτώνεις ασύγχρονα μέσω javascript για να μην καθυστερεί η φόρτωση της σελίδας.
<script type="text/javascript" src="myscript.js" async="true" />

Για να φορτώσουμε στο Elxis 4.x ασύγχρονα κάτι μπορούμε να χρησιμοποιήσουμε την μέθοδο addCustom της βιβλιοθήκης elxisDocument.
eFactory::getDocument()->addCustom('<script type="text/javascript" src="myscript.js" async="true" />');

Στο myscript.js μπορείς να έχεις κάτι σαν αυτό:

var wrapper = document.getElementById('mywrapper');
wrapper.style.backgroundImage = "url('http://www.example.com/templates/mytpl/images/mybg.png')";

[xenios]

Η αλήθεια Γιάννη είναι ότι την έχω δοκιμάσει ήδη την τεχνική που λες αλλά δεν είχα πολύ καλά αποτελέσματα για τον λόγο ότι παρεμβάλλονται οι στήλες στην μέση της σελίδας και έτσι κρύβεται όλη η εικόνα από πίσω.

Είναι μια τεχνική που στο συγκεκριμένο στήσιμο θα δείχνει καλά μόνο σε μεγάλες - πολύ μεγάλες οθόνες.

Η σελίδα που μου έδειξες είναι πολύ ωραία πράγματι! Χρησιμοποιούν με πολύ ωραίο τρόπο το css3 δείχνοντας πάνω από την εικόνα τα μενού και τα κείμενα. Πολύ ωραία!


Στην περίπτωση μου εστιάζω ή σε χρώμα ή σε μοτίβο γιατί με περιορίζουν οι κεντρικές μου στήλες στο να εμφανιστεί καλά μια εικόνα στο background.


Χμ...  ?? 

[datahell]

Μία μεγάλη, επιβλητική, εικόνα ως background είναι καλή επιλογή, και μόνο, σε ιστότοπους με λιτή σχεδίαση και λίγο περιεχόμενο όπου σκοπός είναι ο εντυπωσιασμός του επισκέπτη και όχι τόσο το περιεχόμενο. Πχ μία σελίδα ενός εστιατορίου όπως το εστιατόριο Άμμος.

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

[xenios]

Καταλαβαίνω από το ύφος ότι πρόκειται για γενική και ειδική απάντηση, δεν είχα ενδοιασμούς για αυτό.

Και αυτή η σελίδα είναι πολύ πολύ ωραία και γραμμένη σε elxis μάλιστα..

Δεν μου δείχνεις και μια τελευταία από κάποιον τουριστικό προορισμό;


Για την ώρα έβαλα μια θάλασσα που επαναλαμβάνεται στο background, είναι στο όριο kits και του κάτι θέλω να σας δείξω..


Άλλος;;;

[xenios]

Λοιπόν παιδιά προχώρησα σε μερικές δραστικές αλλαγές αλλά θέλω τα φώτα σας!

στην ίδια σελίδα πάντα ikaria.gr/demo.html  έβαλα το λογότυπο μου αλλά αν και στο css το λέω να είναι relative αυτό εξακολουθεί να λειτουργεί σαν absolute γιατί προφανώς δεν το έχω τοποθετήσει σε κάποιο πλαίσιο μέσα ή γιατί κάνω κάτι άλλο λάθος.

Το πρόβλημα γίνεται εμφανές αν παίξουμε με το μέγεθος του παραθύρου του browser όπου εκεί αρχίζει να μετακινείτε δεξιά και αριστερά το Λογότυπο...

Μπορεί κανείς να με βοηθήσει να το σταθεροποιήσω;   

[datahell]

Το γονικό αντίκειμενό σου στην html είναι το body. Βάζοντας position:relative δηλώνεις την θέση του αντικειμένου σχετικά με το body tag. Καθώς όμως οι διαστάσεις του body εξαρτώνται από την ανάλυση της οθόνης, το εύρος του παραθύρου και τον browser το logo σου είναι φυσικό να πηγαίνει πέρα δώθε. Θα πρέπει να το βάλεις εντός μία περιοχής που είναι σταθερής και ανεξάρτητης της ανάλυσης της οθόνης και του εύρους του παραθύρου. Ενα σωστό σημείο είναι εντός της περιοχής που κάνουν scroll οι εικόνες. Για να σου βγει ακριβώς στο σημείο που θες θα βάλεις αυτή την περιοχή ως relative και το wrapper του logo σου ως absolute. Με αυτόν τον τρόπο, και ένα z-index, το ένα div (logo) με το άλλο (κυλιόμενες εικόνες) θα μπροούν να καταλαμβάνουν ταυτόχρονα τον ίδιο χώρο.

<div class="ikaria_over_all" style="position:relative;">
    <div class="iosclean_logo" style="position:absolute; top:5px; left:60px; z-index:500;">...</div>
    ....
</div>

[xenios]

Το είχα δοκιμάσει αλλά έλειπαν παράμετροι!!!! ΘΕΕΕΕΕΝΞ!!! DATAHELL!!   

[xenios]

Λοιπόν αισίως ,τέλος καλό όλα καλά, είμαι έτοιμος να εκτοξεύσω τη νέα εμφάνιση της σελίδας μου. Δέχομαι γνώμες, αλλά έχω και μια τελευταία ερώτηση, πάνω από το footer, δεν μπορώ να ανακαλύψω γιατί μου κρατάει τόσο μεγάλο κενό,    , έχω δοκιμάσει πολλές αλλαγές για να μικρύνω την απόσταση μεταξύ του τελευταίου module right και του footer χωρίς αποτέλεσμα.

Για την εμφάνιση δίνω τα εύσημα μου στον Νίκο Συρίγο, τον Ιωάννη Σάννο και στον εαυτό μου φυσικά.

[datahell]

Το λάθος είναι εδώ:
#iosclean_rightcol { position:relative; left: 20px; top: -238px; margin: 0; padding: 0; float:right; width: 230px; overflow:hidden; }
Στο αυθεντικό IOS Clean η αντίστοιχψη γραμμή είναι:
#iosclean_rightcol { margin: 0; padding: 0; float:right; width: 180px; overflow:hidden; }

Έχω την αίσθηση πως έχεις και άλλα λάθη καθώς έχεις τροποποιήσει το IOS Clean μη υπολογίζοντας σωστά τις διαστάσεις του layout. Για το κενό πάντως αυτό φταίει.

[xenios]

Όντως ήταν αυτό και διορθώθηκε, αλλά προέκυψε με το blog ένα θέμα κάτι επηρεάζει την εμφάνιση όταν εμφανίζεται το blog πάλι..

http://www.ikaria.gr/blog/diamoni-diatrofi-ikaria/ksenodoxeia/

[datahell]

Νομίζω ότι φταίει το περιεχόμενο του συγκεκριμένου άρθρου αν και όπως είπα το layout σου φαίνεται έχει λάθη (δεν έχω χρόνο να το ψάξω).
Είχες ένα template με σταθερό και σωστό layout, γιατί το χάλασες; Μπορούσες να αλλάξεις την εμφάνιση χωρίς να αλλάξεις την html και το layout του template.