Προς το περιεχόμενο

Προβλημα με background image σε σελιδα


mentoras99

Προτεινόμενες αναρτήσεις

Δημοσ.

Εχω φτιαξει μια ιστοσελιδα βασικα απαρτιζεται απο εναν μεγαλο πινακα (με υποπινακες μεσα, κελια κλπ), και πισω ενα background image.

Οποιος ξερει απο html και κατασκευη ιστοσελιδων νομιζω καταλαβαινει τι λεω.

 

Το προβλημα μου, ειναι οτι ενω ο πινακας και γενικα ολα τα στοιχεια ειναι παντα κεντραρισμενα, σε διαφορες οθονες και αναλυσεις που δοκιμασα, το background image εχει θεση αλλα αντι αλλων οταν αλλαζω αναλυση.

Σε μια μεγαλη οθονη ή γενικα σε οθονες με υψηλη αναλυση, το backround image, οσο φυσικα μενει ελευθερο-ακαλυπτο να φανει απο τον πινακα που ειναι μπροστα, ειναι πολυ ομορφα κεντραρισμενο απο πισω.

Οταν ομως πας σε χαμηλητερες αναλυσεις, τοτε ο μεν κεντρικος πινακας παραμενει μεγαλυτερος μεν (λογω χαμηλοτερης αναλυσης) αλλα εξακολουθει να ειναι κεντραρισμενος, αλλα το background image της σελιδας μενει ως εχει, μεγαλο, ακεντραριστο.

 

Αυτο που θα ηθελα ειναι να ειναι προσαρμοσιμο το backrgound image. Μαλλον οπως καταλαβαινω δεν ειναι στην ουσια προβλημα κεντραρισματος, αλλα scaling, αν δεν κανω λαθος(διορθωστε με).

Δηλαδη, ενω σε χαμηλοτερη αναλυση ο πινακας 'αυτοματως' εμφανιζεται οπως πρεπει, δηλαδη μεγαλυτερος αλλα κεντραρισμενος, η εικονα του υποβαθρου δεν κανει καμια προσαρμογη στην νεα αναλυση με αποτελεσμα να ειναι ενα χαλια αποτελεσμα. Θα ηταν ολα καλα πιστευω, αν η εικονα του υποβαθρου σμυκρινε το μεγεθος της οταν η αναλυσεις ειναι χαμηλες, ωστε να υπαρχει μια αναλογια με τον μπροστινο πινακα και το αποτελεσμα να μην ειναι οπτικα παράταιρο.

 

Υπαρχει λυση γι αυτο το προβλημα;

Δημοσ.

1.τρόπος είναι να κάνεις το backgound να εμφανίζεται πάντα σε ολόκληρη την οθόνη έχει οδηγίες με διάφορους τρόπους εδώ

http://css-tricks.com/3458-perfect-full-page-background-image/

 

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

Δημοσ.

Λοιπον, η παραπανω σελιδα οντως ασχολειται με το θεμα.

Πειραματιζομαι.

Μαλλον θα παω με την πιο ευκολη-απλη υλοποιηση, δηλαδη την 1η που αναφερει.

Ομως, ειμαι μπερδεμενος, γιατι δεν ξερω αν στον υπαρχοντα κωδικα εκει που εχω

background-image: url(.............);

απλα θα προσθεσω απο κατω

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

 

 

Αυτο ηταν;

 

Δεν πρεπει να ειναι αυτο, γιατι στα τσεκαρισματα που κανω, το προβλημα παραμενει. Πχ. με browser τον ΙΕ9 που συμφωνα με οσα λεει το αρθρο στην πρωτη υλοποιηση(Awesome, Easy, Progressive CSS3 Way) θα επρεπε να παιζει σωστα.

Υπαρχει θεμα ασυμβατοτητων μεταξυ των css?

 

Δηλαδη, εγω πηγα και εβαλα τις πιο πανω γραμμες, κατω απο το background-image: url(.............); που ηδη ειχα.

 

Γιατι εξακολουθει να μην μου παιζει σωστα;

Δημοσ.

Δεν ξέρω που έχεις εσύ το background σου εγώ βάζοντας στην αρχή του κώδικα αυτό:

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

μου δουλεύει μια χαρά

 

παράδειγμα:

 

 

>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//utf-8">
<html>
<head>
<style type="text/css">
html {
       background: url(http://img25.imageshack.us/img25/8585/06bkristinkreuk08.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
}
#content {
 position:absolute;
 background-color:lightgray;
 left:10%;
 top:5%;
 width: 38%;
 height: 90%;
}
</style>
</head>
<body>
<div id="content">
Πω ρεαλισμός διατήρηση αφηγήσεις απ να.Μπλα μπλα μπλα...........

</div>

</body>
</html>

 

 

Δημοσ.

Εν τελει, ειχαμε κι οι δυο δικιο!

Γιατι δουλευει οντως, αλλα οχι με τον ie9 που το δοκιμαζα! Ο ιδιος κωδικα με ολους τους αλλους browsers τη δουλεια την εκανε οπως επρεπε. Αλλα ο ie τον χαβά του.

Ο ie ειναι εκδοση 9.

Αυτη η παρατηρηση που εχει το λινκ που εδωσες στην πρωτη υλοποιηση, μπορει με καποιο τροπο να φιξαρει το προβλημα με τον ie?

Δημοσ.

Τι να πω,σε εμένα με το IE8 δουλεύει μια χαρά,λες να το κάνανε χειρότερο το 9 από το 8;ενδέχεται Microsoft είναι αυτή. :mrgreen:

Μήπως στο IE9 έχεις βάλει τίποτα πρόσθετα ή ρυθμίσεις που το σταματάνε από το να δουλέψει;

Δημοσ.

Οχι, σκετος ΙΕ9, και αυτος, το δειχνει προβληματικά.

Αν υπηρχε καποιος ευκολος τροπος να δουλεψει κι αυτος καλα θα ηταν, οχι για τιποτε αλλο, για το μεριδιο αγορας που ακομη κατεχει.

 

Οπως και να εχει, ευχαριστω πολυ για την πολυτιμη βοηθεια σου! :)

Αρχειοθετημένο

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

  • Δημιουργία νέου...