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

Mark Libario
Mark Libario
9,003 Points

Where and how can you make a background image clear and crisp without it being stretched or cropped?

Hey guys, im trying to figure out how can you put a background image on a header or on the whole page without it being stretched or cropped and still look crisp and clear?

ive played around the background -image property with the background-size: cover; or background-size: 100% 100%;

but the photos still dont seem clear and crisp.

I download my photos just directly from google and try to search of HD quality photos.

any tips?

an example would be a header with a background-image like this one: https://dribbble.com/shots/3512710-Travel

http://salleedesign.com/photography/yosemite-hikes/

2 Answers

Steven Parker
Steven Parker
216,017 Points

You generally have to either stretch or crop.

Cropping will preserve the original quality. Using "cover" as a size setting will shrink or crop as long as the image is larger than the display area, and stretch if it is not. And shrinking doesn't affect apparent quality as much as stretching. So the first trick to clarity is to use an image of sufficient size and resolution.

The background of your second example seems to be 1920 x 1291 and displayed using "cover". This is large enough so that stretching will not often be required. But if you wanted to take even more steps for image quality, you could have different sizes of the image selected by CSS media queries for the best look on various window sizes and device resolutions.

Mark Libario
Mark Libario
9,003 Points

I see! Thank you! I thought Im just choosing the wrong place to use as images.