CODEWITHSUNDEEP
iphonecssipadbackground-imagesafari
Soo
Soo

Reputation: 51

iPad & iPhone: full page background image shows cut off /screen shot link included

The full page background image shows cut off on iPhone and iPad (safari iOS 5.01). http://www.theantarcticbookofcookingandcleaning.com

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

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

the code used -> the 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;
}

Upvotes: 5

Views: 24240

Answers (5)

phildub
phildub

Reputation: 381

Well, for me simply replacing:

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

by:

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

did the trick. You may want to try it.

If it doesn't work for you, then the Apple Safari Dev Docs may be helpful to you: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Upvotes: 6

Tim Kozak
Tim Kozak

Reputation: 4182

Code here

It fixing background images for ipad

Just enter sizes according to your image dimentions

/* 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;
  }
}

Upvotes: 0

Bobby Tzenev
Bobby Tzenev

Reputation: 59

The trick is to give min-width to the body

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

Upvotes: 5

piersadrian
piersadrian

Reputation: 1703

Your issue is background image scaling. When rendering any image, Safari on iPad will try to scale it to fit best on the device. If the image's actual size is larger than the iPad's display, it'll scale. In this case, your background image is 1280x3900—much larger than the iPad's resolution—so Safari is trying to resize it to fit vertically.

This question elsewhere on Stack Overflow may help you resolve this issue. I agree with the responder's suggestion of resizing the background image and serving it using a media query only to iPads 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');
    }
}

Upvotes: 2

circusdei
circusdei

Reputation: 1967

try adding:

#wrapper { ...
    background-size: cover;
... }

Upvotes: 1

Related Questions