Reputation: 51
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
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
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
Reputation: 59
The trick is to give min-width to the body
body{ width:100%;min-width: 1280px; }
Upvotes: 5
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