• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Background Scaling Issues on the iPad Safari Browser

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

Tagged: iPad Safari Background Issues

  • This topic has 6 replies, 2 voices, and was last updated 9 years, 2 months ago by Wes.
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.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework