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
David Klotz
19,659 Pointsbackground-size:cover + mobile devices
I have a fullscreen div that has a background image and centered text, and I've set the background-size:cover. It looks great on desktop, and when I resize my browser on desktop the image resizes. However, when In iOS safari, the image remains full size, only showing a very small part of the image. Does anyone have any experience with this and know how I can fix this?
5 Answers
George Cristian Manea
30,787 PointsTry using media query like this .cover { background-size: cover; background-attachment: fixed; @media (max-width: @iphone-screen) { background-attachment: scroll; } }
George Cristian Manea
30,787 PointsFor Safari versions <5.1 the CSS3 property "background-size" doesn't work. In such cases you need webkit.
So you need to use -webkit-background-size attribute to specify the background-size.
So use -webkit-background-size:cover.
David Klotz
19,659 PointsGeorge thanks for the response, much appreciated. However, I added the webkit prefix and still had the same problem, the image on iOS doesn't resize, it stays the same size as on desktop.
George Cristian Manea
30,787 PointsCan you show me every css rule you are using for that div?
David Klotz
19,659 Pointshere is what I have for it
height: 100%; width: 100%; position: relative; background-color: #eaeaea; background: -webkit-linear-gradient(bottom, hsl(360,100%,0%), rgba(0,0,0,.45) 75%), url('img/bg01.jpg') top left no-repeat fixed; background-size:cover; background-position:60% 0%;