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 theresad123
theresad123
699 Points

background-size property and image size/sharpness

In the "Add Iconography" video I listened to Nick say that the background-size property will re-size the background BUT in the same breath he said the images we are trying to add are double the size they need to be and that sizing them down will make them look sharp. What the heck does the background-size have to do with the image size?

2 Answers

Stephen Blank
Stephen Blank
16,286 Points

When you give an element a background image, background-size actually controls the image size. Nick might have been eluding to the practice of sizing down a higher resolution image so that it will display sharply on devices with high pixel density (retina displays)

This video is part of a more advanced topic, but goes into detail really well on this subject:

http://teamtreehouse.com/library/css-foundations/media-queries/devicespecific-media-queries-part-2

theresad123
theresad123
699 Points
theresad123
theresad123
699 Points

Thank you Steve. I just am a bit confused as to why a small picture of a phone or the twitter logo is called a background image.