Background Scaling Issues on the iPad Safari Browser

Homepage › Community Forums › Ally Theme Support › Background Scaling Issues on the iPad Safari Browser

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 4, 2013 at 1:24 pm #8698
    CharlesG
    Customer

      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.

      November 4, 2013 at 6:50 pm #8703
      Wes
      Moderator

        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.

        November 6, 2013 at 12:59 pm #8726
        CharlesG
        Customer

          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.

          November 6, 2013 at 10:24 pm #8741
          Wes
          Moderator

            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.

            November 11, 2013 at 1:47 pm #8819
            CharlesG
            Customer

              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.

              November 20, 2013 at 1:03 pm #9028
              CharlesG
              Customer

                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?

                November 20, 2013 at 8:26 pm #9035
                Wes
                Moderator

                  Since you’ve added the background through the custom uploader, you’ll have to directly add background: none; to body.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.

                • Author
                  Posts
                Viewing 7 posts - 1 through 7 (of 7 total)
                • You must be logged in to reply to this topic.