Build Your Own Business Website header image

Why Does My Header Image Look Fuzzy

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session we discuss why a header image looks fuzzy and how to resolve it by resizing the image to it’s correct dimension by using Photoshop, Paint.net or other image editing software. We also show how to make the header image clickable by going to Thesis Design Options and under Display Option, checking “Show site name in header”.

Video Transcript

And then why would the header image hosted on a WordPress website look worse than on a WordPress hosted website? HometekUS and edencleve.wordpress.com?

Well, let’s take a look at that. cleve.wordpress.com… okay right there and then the other one is hometek.us. Is that teck or tek? Okay the reason is that it’s being modified and therefore blurred here on this site. So for example, if we just come over… I think maybe you used the Thesis header image already for this then. And if you didn’t, well just take a look at this for a second. Firefox will allow me to determine you know, what the size of the image is.

Okay so I’m going to inspect this element. Okay it has…so what has happened is this… you uploaded image that is bigger than 800 pixels wide and you allowed Thesis to downsize it to 800 by 169 whereas the actual image size is 940 by 198. And so, you know, any time you manually shrink an image like this and by manually I mean you know, let the computer shrink it for you or let the web shrink it for you, it’s going to lose resolution. The way to do this, if you want this thing to be 800 pixels wide, you want to grab the main image and add its full size and then use Photoshop or use you know, Paint.net or some other photo editing program and take the image and scale it down to the right size. And then upload it to your site as a header.

Now, it looks to me like you have one problem with this and that is you’re using this…seems like you must be using the Thesis header image function. But you need to set on configuration so that it will link and that configuration is this under Thesis Design Options. And under Header, you need to have it say show site name in header. That needs to be checked. If it’s not checked, the image shows but it doesn’t linked. If it’s checked, the image shows and it is linked but that site name still doesn’t show. So that’s the trick for this header image is to make sure you have this button checked.And so, once you do that, this will become clickable.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment