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

when i open my desing on an ipad the background does not cover all the screen.

looks good on my laptop but not in my ipad

body {
    font-family: 'Fauna One', serif;

    margin-top: 50px;
 /* fallback */

  /* Safari 4-5, Chrome 1-9 */
  background-image: url('../img/bacg-001.png') , url('../img/bacg-002.png') ,
  -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c38b70), to(#f3eedf));

  /* Safari 5.1, Chrome 10+ */
  background-image: url('../img/bacg-001.png'), url('../img/bacg-002.png') , 
  -webkit-linear-gradient(bottom, #f3eedf, #f3eedf, #f3eedf,  #c38b70);

  /* Firefox 3.6+ */
  background-image: url('../img/bacg-001.png'), url('../img/bacg-002.png') ,
  -moz-linear-gradient(bottom, #f3eedf, #f3eedf, #f3eedf,  #c38b70);

  /* IE 10 */
  background-image: url('../img/bacg-001.png'), url('../img/bacg-002.png') ,
  -ms-linear-gradient(bottom, #f3eedf, #f3eedf, #f3eedf,  #c38b70);

  /* Opera 11.10+ */
  background-image: url('../img/bacg-001.png'), url('../img/bacg-002.png') , 
  -o-linear-gradient(bottom, #f3eedf, #f3eedf, #f3eedf,  #c38b70);

    background-repeat: no-repeat, repeat-x;
    background-position: left top, left bottom;
}

2 Answers

Andrew Shook
Andrew Shook
31,709 Points

This may not be a problem with your css, but with safari for iOS. I would turn on web inspector for safari in setting>safari>advanced. Then connect you iPad to your laptop, open the website on the iPad, and then open safari on your laptop and under develop you should see the iPad. If you click on it, a web inspector should show up on your laptop for the webpage you have opened in safari on your iPad. If you click on elements in the DOM they will highlight on the iPad and you can see what going on with HTML and CSS.

That being said, it most likely has to do with iPad having a higher pixel density per inch than most computers. Most iPhones and iPads can display things large than 320x480 pixels. As a result, iOS safari will try to scale the webpage to fit on the screen(happens most often with the iPhone though). Without seeing any code or the site, I would assume you need to use the viewport meta tag. This meta tag tells webkit mobil browser thing like how wide your site should be, what the initial scale should be, and whether or not you site should be scalable on mobil browsers. For more info on the meta tag and how iOS safari works look here Apple Docs

Kester Browne
Kester Browne
24,414 Points

Look up and use background: cover;

Andrew Shook
Andrew Shook
31,709 Points

I would still include the viewport meta tag, if it's not already in your html. It'll help to ensure you website displays the way you want it to on mobil webkit browsers.