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

[rafinos]

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

 

Έχω τα παρακάτω 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.

 

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

[stergi17]

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

[dominotrix]

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

 

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

 

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

[rafinos]

Ορίστε!

 

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

 

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

 

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

 

 

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

Επεξ/σία 23 Νοεμβρίου 2016 από rafinos

[lionheart82]

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