Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Pete Cass
Pete Cass
16,656 Points

background images doing weird stuff on ipad

hey,

I've just built a webpage for my ma's birthday. It uses a lot of background images and looks just how i want it to on desktop browsers. However when i view it on an ipad an extreme pixelated close up is displayed instead.

Anyone know why this is happening?

thanks!

Pete

3 Answers

ellie adam
ellie adam
26,376 Points
ellie adam
ellie adam
26,376 Points

Hi, Did you write background no-repeat?

body {
    background-image: url("paper.gif");
    background-repeat: no-repeat;
}

For small screen you need to declare media query.

body {
    background: #000 url(paper.gif) no-repeat center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
}

I hope this help :)

Pete Cass
Pete Cass
16,656 Points

hey thanks for your detailed reply, i'm pretty sure i've already declared those.

here's a link to my github https://github.com/Petecass/mum_2/tree/gh-pages

i'm using vh to set each div to the same height of the viewport and i wonder if this is affecting things. when i re-size the web browser it works fine.

just doesn't work on ipad

Gregory Radek
Gregory Radek
869 Points
Gregory Radek
Gregory Radek
869 Points

Hi,

What version of iOS do you have on your iPad? I'm going to guess its iOS 7? Viewport values (such as vh and vw) are technically supported on iOS 7 but simply do not work. What you are describing sounds like what is happening here. There is no simple fix for this with css if you want to keep your viewport values. The simplest fix would be to make sure people only view your site with iOS 8+ (which is very unreasonable and not advised currently) or you could use this buggy fill which attempts to fix the problem: https://github.com/rodneyrehm/viewport-units-buggyfill

Pete Cass
Pete Cass
16,656 Points
Pete Cass
Pete Cass
16,656 Points

Thanks both of you for your replies. It turns out the problem was 

background-attachment: fixed;

this isn't supported by ios. So unfortunately my site now doesn't work just how i wanted it to on ios but still looks the same on desktop, as i targeted larger screens with a media query.