background image not showing in full size on mobile

Question

I use this code to show image background:

body {
    background:url('images/bg.jpg')no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden; 
}

works good on desktop computer but when I look at the site in mobile (iPhone for ex) the image not reach the bottom of the screen and there is a white space after it.

my image file size is: 1280X1007

How can I fix that?

Hey @Italy can you show us live demo of your code.... – Shailender Arora May 14 '13 at 11:17 — Shailender Arora, May 14 '13 at 11:17

score 0 · Answer 1 · answered May 14 '13 at 11:29

0

maybe a body { height = 100%; margin = 0; ...} is useful!?
What is the resolution of your iPhone and can you try it on other devices with Safari-Browser?

answered May 14 '13 at 11:29

dsuess

5,219
2
22
22

just found another thread, talking about "CSS3 background-size:cover property" especially for mobile devices. http://stackoverflow.com/questions/15687778/how-to-use-css-media-query-to-scale-background-image-to-viewing-window?rq=1 – dsuess May 14 '13 at 11:30

background image not showing in full size on mobile

1 Answers1