Background not displaying properly on iPad/Android

Question

My website displays normally on most browsers, but I have two different problems on the iPad and the Android browsers.

Initially the webpage displays on a 1-1 scale, while I would like visitors to see the entire webpage.
The background doesn't show correctly. When I zoom out, only part of the background seems loaded.

I used:

<meta name="viewport" content="width=device-width">

for the initial zoom and:

div.background {
    width: 100%;
    background: #ffffff url('../img/background_first.jpg') center top no-repeat;
}

for the background. I event tried to add:

-webkit-background-size: 1500px 1000px;
background-size: 1500px 1000px;

but the background problem (which is my main concern) remains. Any ideas?

Can't you add a background image and on top of it everything else - thus this image will determine the size of the background for all? — g00dy, Mar 06 '13 at 11:03
@Anax - does it still hapen when you change the orientation of the device? — g00dy, Mar 06 '13 at 11:10
Maybe this thread will help: http://stackoverflow.com/questions/3496505/differences-between-uiwebview-and-mobile-safari Hope so .. — g00dy, Mar 06 '13 at 11:21

score 1 · Accepted Answer · answered Mar 06 '13 at 11:23

1

Try giving your .background a fixed width.

100% width is 100% of the container, which in this case is body. On a mobile device, the body is much smaller than on a desktop, resulting in a cropped background image.

Also try to give a fixed width in your `meta viewport``

<meta name="viewport" content="width=940, initial-scale=1">

answered Mar 06 '13 at 11:23

Ruben

796
3
9
21

By changing the viewport as suggested, the webpage displays properly. – Anax Mar 06 '13 at 11:43

Background not displaying properly on iPad/Android

1 Answers1