Grow your CSS skills. Land your dream job.

iOS background-size issue

  • # December 22, 2011 at 10:56 am

    I have a div that stretches 100% with a background image. I have the following CSS applied to the div;

    .top-wrapper {
    width:100%;
    height:186px;
    position:absolute;
    top: 0px;
    background: url(images/header-bg.png) center;
    background-size: 100% 186px;
    -webkit-background-size: 100% 186px;
    z-index: 10;
    float: left;
    }

    The issue comes into play when I view the site on my iPad. The background image doesn’t size to 100% width. I’ve searched this site and many others and everyone seems to find success in using the webkit part of the CSS. However, this isn’t working for me.

    Here is the url to the site (it’s under construction so it might look a little funky)

    http://production.semplesolutions.com/harveys/

    # December 22, 2011 at 11:36 am

    I’m wondering if this is another place where:

    would be the fix?

    # December 22, 2011 at 1:17 pm

    iOS is funky with backgrounds. I know for a fact that it won’t handle a fixed-position background (it will scroll with the content), so it’s very possible it also won’t resize.

    EDIT: nope, iOS seems to handle that just fine, must be something else.

    # December 22, 2011 at 1:34 pm

    i removed the meta tag that Paulie_D mentioned and that seemed to do it. I’m pretty much restyling the twentyeleven theme in wordpress so I’m not sure what some of the code is doing at this point.

    Thanks for your help guys

    # December 22, 2011 at 1:38 pm

    Now the fun begins with getting this to work in ie8. yippie

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".