Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I have a website using a huge background image (2000×1500) in a div container (100% x 100%).
When I open that site on Safari on an iPad it gets scaled down (~40%) in a different proportion than the content (~80%).
I moved the background to an img-tag in a div with 100% width and 100% height and an overflow setting “hidden”. Exactly the same happens.
Is there a CSS Setting that can help Safari to scale down background images in the same proportion as the content?
You should definitely create a separate stylesheet for the iPad.
You can use the following to do so:
On this link, you will find information about the orientation of your website on the iPad and how to deal with it.
My advice would be, to create a separate stylesheet (css file) for the iPad version of your site, no matter what you do, you should just create it and add a link tag like the one shown above.
If you have a background of a picture that is 2000x1500px for the iPad version, you can reduce it to fit the iPad, if that’s the only thing you’ve got a problem with. I’d say you should reduce the size of the image to 1024px and declare it in the separate stylesheet for the iPad, and you will see the end result.
Let me know how it goes.
BTW you should read this article as well: http://www.inspiredm.com/2010/02/09/ipad-design/