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

Design

Blurry image

How do I save an image for a html website to go in the background or wrapper. I've tried and tried and It comes off blurry when my jpeg wasn't before. Thanks

1 Answer

Chris Dziewa
Chris Dziewa
17,781 Points

If the image is too small in resolution it will become blurry from stretching it to fit the container. If you have photoshop, open the image and go to file > save for web and devices and use .jpg for a photo or .png if it's a transparent object or if you're saving a graphic with large areas of color try a .gif. Also if it is a graphic in illustrator, learn about svg files.

Right now you can use either chrome developer tools or firebug in firefox to check the size of the div you are trying to fill. Compare that to the dimensions of the image you are trying to fill it with. If it is still blurry even after making the size correct, try putting your files into codepen to share your code.