CODEWITHSUNDEEP
androidcsshtmlipad
Anax
Anax

Reputation: 9372

Background not displaying properly on iPad/Android

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

  1. Initially the webpage displays on a 1-1 scale, while I would like visitors to see the entire webpage.
  2. 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?

Upvotes: 0

Views: 1209

Answers (1)

Ruben
Ruben

Reputation: 806

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">

Upvotes: 1

Related Questions