- This topic has 6 replies, 2 voices, and was last updated 8 years, 7 months ago by
.
-
Posts
-
I’m working on the following site: http://www.vistacayvacations.com and for some reason, the background isn’t scaling correctly on the iPad when using the Safari browser. Is there something I have to add into the CSS to make this function properly? Thanks in advance.
I don’t have my iPad with me at the moment, but can you explain a little more in detail what’s going on? I tried resizing my browser, but I’m not seeing any issues…plus I’m on a Macbook so that may have something to do with it.
Thanks for getting back to me. The re sizing of the browser on the Macbook and anything else works fine and when it’s down to the iPad screen size the background disappears which is what I want, but when viewing the site on the iPad the background stays in one place and doesn’t scale to fit the screen size. I would prefer for the background to disappear when viewing on the iPad and I put some extra coding into the CSS, but it doesn’t seem to work.
Background images don’t scale to fit on any device by default, they’re supposed to stay in place as it is. If you want a background image to scale you can use any of the css3 features to do that if you want. Here is a little info on how to do it – http://www.sitepoint.com/css3-background-size-property/
I still haven’t got in front of an iPad just yet, so try increasing the width to the media query and see if that helps.
Thanks for sending me the site to add some extra CSS3 features into my code. I went ahead and added some of the code that the site suggested, but I’m still having the same problem on the iPad. I even tried increasing the width on the Media Query from 960 to 980 as well to see if that would help. If you don’t have your iPad in front of you I could send you a screen shot of mine to show you what’s happening with my site.
I tried a couple of more different coding techniques in the CSS file, but nothing seems to help me with my problem. I took a picture of what it’s looking like on my iPad and added it to one of my pages. You can see it here, http://www.vistacayvacations.com/test/. What I would like is for the background to completely go away for the iPad. It does on the FireFox browser that I have for the iPad, but this is what it looks like on Safari. Is there anything special in the CSS that I should add?
Since you’ve added the background through the custom uploader, you’ll have to directly add
background: none;tobody.custom-background. You’ll need to add this in the responsive section of your css –body.custom-background { background: none !important; }To see which section to put it in, look for the one labled iPad/landscape etc…..or just play with them all until you get it in the right spot.
- You must be logged in to reply to this topic.