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

Περίεργο θέμα με css

Ερώτηση

Καλησπέρα παιδιά.

 

Έχω τα παρακάτω styles

body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-image: url("img_styles/background.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#container{
	margin: 0 auto;
	width: 100%;
	background-image: url("img_styles/container_background.png");
	background-color: #fff;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

Με τα παραπάνω το container πιάνει όλο το εύρος του width. 

Επειδή θέλω όμως το body να πιάνει όλη τη σελίδα (για το background κυρίως) κάνω αυτό.

html{
	width: 100%;
	height: 100%;
}

Μετά από αυτό δημιουργείται margin στο container. Δοκίμασα να δώσω μηδενικά margin και padding στο html αλλά τζίφος. Τελικά το πρόβλημα λύνεται μόνο όταν δίνω "overflow: hidden;" στο body.

 

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

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

4 απαντήσεις σε αυτή την ερώτηση

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

  • 0

Πιστεύω ότι πρέπει να δώσεις στο css κάποιο position:fixed ή position:absolute. Δες και αυτόν εδώ τον οδηγό για full-width background images

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Ειναι ευκολο να το βαλεις μεσα στο codepen.io ετσι ωστε να δουμε live το αποτελεσμα; Ειναι σημαντικο να δουμε και την δομη (το html δηλαδη περα απο το css).

 

Αν θελεις η εικονα να πιανει ολο το body τοτε δως της: background-size:cover; background-position:center center;

 

Αν θελεις η εικονα να ειναι responsive, τοτε θα πρεπει το div να ειναι responsive και η εικονα να μην εχει το cover σαν background-size, αλλα το contain. Δηλαδη: background-size:contain; Αυτο ομως θα δημιουργησει κενα, επανω ή κατω, αναλογως το ratio οθονης/εικονας.

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0
Δημοσ. (επεξεργασμένο)

Ορίστε!

 

http://codepen.io/rafail/pen/pNPmzY

 

Εδώ όμως δε φαίνεται να υπάρχει το πρόβλημα. 

 

Για να δείτε όλο το container μικρύνεται το παράθυρο.

 

 

***Εντάξει παιδιά! Ευχαριστώ για τις βοήθειες. Το "margin-top: 20px;" στο #buttons έκανε τη ζημιά. Γιατί άραγε συνέβη αυτό;

Επεξ/σία από rafinos

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες
  • 0

Στο Codepen δεν πρόσεξα κάτι ούτε εγώ. Παίζει μεγάλο ρόλο σε ποιο browser βλέπουμε την σελίδα μας. Εαν ήσουν πχ σε IE (8-9) η ακόμη και 10-11 δεν θα μου έκανε εντύπωση να είχε θέμα και να ήθελα κάποιο position:relative για να παίξει σωστά...

Κοινοποιήστε αυτήν την ανάρτηση


Σύνδεσμος στην ανάρτηση
Κοινοποίηση σε άλλες σελίδες

Δημιουργήστε έναν λογαριασμό ή συνδεθείτε για να σχολιάσετε

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

Δημιουργία λογαριασμού

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι εύκολο!

Εγγραφείτε για έναν νέο λογαριασμό

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
×
×
  • Δημιουργία νέου...

Χρήσιμες πληροφορίες

Με την περιήγησή σας στο insomnia.gr, αποδέχεστε τη χρήση cookies που ενισχύουν σημαντικά την εμπειρία χρήσης.