Geek Answers Handbook

IPad & iPhone: Full Screen Background Image Shows Disabled / Enabled Image

The full background image of the page is disabled on the iPhone and iPad (iOS 5.01 safari). http://www.theantarcticbookofcookingandcleaning.com

It would be great if you could give me some advice on this. Thanks for your help in advance!

Screenshot below: http://www.soojincreative.com/photo.PNG

used code -> background image is in #wrapper:

enter code here
body {
font: normal normal 16px/22px "Kingfisher Regular", Georgia, "Times New Roman", serif;
font-size-adjust: 0.47;
color: #000;
background-color: #e3e8ee;
margin-top: -13px;   
}

#wrapper {
padding-top:none;
background: url('images/background2.jpg') no-repeat center;
width: 1280px;
margin: 0 auto;
overflow:hidden;
}
+5
source share
5 answers

Well, for me it's just a replacement

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

by

<meta name="viewport" content="width=1024">

did the trick. You can try.

, Apple Safari Dev Docs: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

+6

, min-width

body{ width:100%;min-width: 1280px; }
+5

- . Safari iPad , . , iPad, . 1280x3900, , iPad &mdash, Safari .

This question elsewhere in Stack Overflow can help you solve this problem. I agree with the respondent’s suggestion to resize the background image and serve it using a media request for iPads only and leaving it alone on desktop browsers.

To implement a media query, add the following to the bottom of your CSS file:

@media screen and (max-device-width: 1024px) {
    #wrapper {
        background-image: url('/path/to/smaller/background/image.png');
    }
}
+2
source

try adding:

#wrapper { ...
    background-size: cover;
... }
+1
source

Code here

It captures background images for ipad

Just enter sizes to fit your image sizes.

/* Page background-image landscape for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image portrait for iPad 3 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {
  .introduction-section {
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
    background: url('background-image.jpg') no-repeat center top #000 !important;
  }
}
/* Page background-image landscape for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 2024px 768px !important;
    background-size: 2024px 768px !important;
  }
}
/* Page background-image portrait for iPad 1/2 */
@media only screen
  and (min-device-width: 768px)
  and (max-device-width: 1024px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 1) {
  .introduction-section {
    background: url('background-image.jpg') no-repeat center top #000 !important;
    -webkit-background-size: 5024px 2024px !important;
    background-size: 5024px 2024px !important;
  }
}
0
source

More articles:


All Articles