Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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 :)

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

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

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.