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
Mark Libario
9,003 PointsWhere 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
2 Answers
Steven Parker
229,657 PointsYou 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
9,003 PointsI see! Thank you! I thought Im just choosing the wrong place to use as images.