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! While you're at it, check out some resources Treehouse students have shared here.
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
Francisco Gonzalez
1,302 Pointsbackground
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
31,709 PointsThis 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
24,414 PointsLook up and use background: cover;
Andrew Shook
31,709 PointsI 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.