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

CSS

Posted by Hayden Ohmes
Hayden Ohmes
1,964 Points

Having trouble making my background image responsive

I am a beginner making my fist website and I have hit a wall with making my background image responsive on smaller devices. On the ipad and iphone the picture is extremely large and pixelated. Please help. Here is my code for the background image. Here is a link to my website. iamhaydenohmes.com

/*********HEADER, IMAGES & LOGO***********/

body {
    background-image: url(../images/shutterstock_269377499.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;

}

/************SMARTPHONES**(PORTRAIT & LANDSCAPE)***************/


@media only screen and (min-device-width : 320px) and (max-device-width : 480px)

{

body {
    background-image: url(../images/shutterstock_269377499.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;

}

2 Answers

Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Hi Hayden,

You've got a whopper of a picture there: 3000 x 2000 px and 1.3 Megabytes. For the web this is much to big. You use the same pic on a mobile device, so on wifi it takes a very long time to load. Make the image smaller with Photoshop or something. Give it a maximum width somewhere between 1500 and 1900 px and a quality of 80%. You'll loose a little bit of quality (nearly invisible) but a lot of megabytes.

You can also make a second and third version of your image optimized for mobile phone and tablet so you end up with three images: for example 1500x1000px, 1000x750px and 500x375px. Via media queries you serve the corresponding picture.

When you take the "Mobile first" approach your css could look something like this:

body {
    background-image: url(../images/picture-small.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;  
}
@media only screen and (min-device-width : 480px) {
  body {
    background-image: url(../images/picture-medium.jpg);
  }
}
@media only screen and (min-device-width : 1024px) {
  body {
    background-image: url(../images/picture-large.jpg);
  }
}
Erwin Meesters
Erwin Meesters
15,088 Points
Erwin Meesters
Erwin Meesters
15,088 Points

Furthermore there is a problem with full page backgrounds on iOS devices which require a bit of a hack. Put the following in your css and test it:

html {
  height: 100%;
  overflow: hidden;
}
body {
height: 100%;
margin: 0;
overflow: scroll;
-webkit-overflow-scrolling: touch;

 background-image: url(../images/shutterstock_269377499.jpg);
 background-size: cover;
 background-attachment: fixed;
 background-repeat: no-repeat;
 background-position: center center;
}

You maybe have to play around with your media queries or use modernizr to detect a touch device so you can put the fix only on touch devices.