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 Matthew Boysel
Matthew Boysel
295 Points

CSS Questions

On DoctorLadyBug.com, I don't understand why a few things are going on with the CSS. For some reason the header image is blurry with different screens. How can I make the image as clear as possible?

Secondly, I added a background image to the WordPress theme I am using and it looks really funny since it does not extend to full width and full length when I am looking at it from a bigger screen (again I still want the best clarity as possible). For example, if you go to the "About" page, you can see the image repeating on the right and also it's repeating towards the bottom.

If you can help and send the exact code I need to change, that would be fantastic! Thanks so much!

5 Answers

Ashley Franklin
Ashley Franklin
17,633 Points
Ashley Franklin
Ashley Franklin
17,633 Points

The image quality just depends on the image itself, if it's a lower resolution image it's going to get worse and worse as it tries to fill a larger space. To get the best image possible it's just a matter of tinkering with your image and quality settings. If you're using jpgs, I find this one nifty: http://www.jpegmini.com/

For the background image, it can be as simple as adding 'no-repeat' to your background property; so you'd have this: background: url("http://doctorladybug.com/wp-content/uploads/2014/05/bg-2-1.jpg") no-repeat;

You can also add background-size to stretch it out, but I'd recommend playing around with the images first :)

I think you'll find this article super helpful and it gives you the code you'll be working with: http://css-tricks.com/perfect-full-page-background-image/

Cheers!

Matthew Boysel
Matthew Boysel
295 Points

Hi Ashley,

I appreciate your reply!! What size do you suggest I make the header image so that it's not blurry? I am not sure what size to make the image since it adjusts pixels based on screen size.

Also, it's kind of the same question for the background image. I know I can do the no-repeat property, but how can I make sure the image will cover the whole page without leaving any empty space? I am just not sure what size to make the images or if there is CSS adjustments that need to be changed?

Thanks, from the newbie!

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

Try this CSS

imageOne{ 
background: url('imagewithcorrectpath') no-repeat center center fixed;
width: 100%;
height: 100%;
-moz-background-size: cover;
background-size: cover;
}
Matthew Boysel
Matthew Boysel
295 Points

Hi Jason,

Thanks for your response! Much appreciated. That works for the background image, but it's a little blurry. Do you happen to know what size I should have the background imaged sized too so that it's crystal clear?

Thanks so much,

Matthew

Matthew Boysel
Matthew Boysel
295 Points
Matthew Boysel
Matthew Boysel
295 Points

Hi Jason,

Thanks for your response! Much appreciated. That works for the background image, but it's a little blurry. Do you happen to know what size I should have the background imaged sized too so that it's crystal clear?

Thanks so much,

Matthew

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

I think retina displays are somewhere around 2500 or 2600px wide, so I would start with a 2550px width and see what that turns out using the same CSS I provided above. Although you may not have a retina display computer, optimizing your images for this screen size should result in better crystal clear images.

Hope this helps. Cheers

Edwin Goddard
Edwin Goddard
8,988 Points
Edwin Goddard
Edwin Goddard
8,988 Points

One other thing you might want to consider is using an SVG for the logo. If you have the original of this in a vector form it will scale indefinitely as an SVG stores the information about the actual lines and shapes in an image, rather than what colour each pixel should be (as a jpg does).

You could then overlay the SVG over the background image.