Blurry header image

Do you have the address to the image that you originally uploaded? I assume this one was altered by the theme?

https://www.dropbox.com/sh/s1r69rbnuxpch22/AAChqb_zYx5Jefj-2xpte27pa?dl=0 I included one of the original images used to create the montage along with the header image. Looks like they are 100dpi. Could that be the problem?

I actually wanted the URL of the image in your media library, but then I realized that you probably uploaded it using the Customizer. Can you add the original image directly to your Media Library and post the URL for it? We can try adding some CSS so that the header uses that unaltered image, in case the theme changes the resolution when it crops it.

Correct. I use customizer. I assume I have to go through C-Panel to get that link? Sorry, I’m new at WordPress and it’s been years since I messed with a webpage. That was my guess that CSS was changing the resolution but I haven’t been able to recognize the line in my CSS editor to verify. How do I go about finding it or getting you the image link?

• This reply was modified 8 years, 1 month ago by dingo883.

I’ve copied the running css file at the same link I gave you previously. I see the entries for size but nothing that mentions quality, as far as I can tell.

No, you don’t have to go through CPanel. When you’re in the Media Library, just add the original picture to it (you can either click the Add New button or drag & drop from your local file explorer window). Once the image has been uploaded, click on it and an Attachment Details dialog will open up. On the right will be a field labeled URL. Copy & paste that URL in your next post here.

https://brocksbooks.com/wp-content/uploads/2016/10/cropped-2000_500-background-1.jpg I’ll ask you about it cropping the image beyond the 1000×250 default once we get the quality issue figured out.

https://brocksbooks.com/wp-content/uploads/cropped-huge-header-2500.jpg This is the latest image and the best I’ve been able to produce thus far. It is exactly twice the recommended dimensions.

Very strange. When I look at the large image, it’s half the size as I would think. It’s supposed to be 2000×500? Are you uploading it directly into the Media Library or are you uploading it through the Customizer?

Customizer has a button to upload images. I believe that just opens the media library page. Here’s a link to the current image uploaded directly from the media page. I see it shrinks the image but only by about 15% or so. https://brocksbooks.com/wp-content/uploads/huge-header-2500-DL.jpg

• This reply was modified 8 years, 1 month ago by dingo883.

Looks like you just changed your theme. I was about to give you some CSS to helped with the blurred header for your previous theme, but let me know when you’ve decided on a theme and I can help further.

Damn, I was just about to message you to inform you that I was trying out a different theme. It’s crystal clear in this theme, so it’s certainly something to do with Zillah. I installed the multiple themes plugin in hopes of being able to try a new theme without disrupting the active one, but I haven’t figured it out much. Sorry for getting in the way. I found where I can tinker with the css. I don’t know squat about php but my meager html skills allow to tinker a bit. If you want me to switch it back let me know. I hate to waste your time like this.

I’ve switched it back. I’ll go find something “useful” to do while you’re working.

No worries. I was just surprised that it changed themes when I was in the middle of working on it. And feel free to try different themes, you may find something better suited to your site. In fact, I would recommend a theme from the WordPress theme repository, because those themes tend to be kept up to date with the latest security patches, and they follow standards that are set by WordPress.

That last URL you posted is perfect because it doesn’t have cropped in the name.

Now, I see that you have Jetpack installed, so first activate Jetpack’s Custom CSS option by going to Jetpack → Settings → Appearance, then scrolling down and turning on Custom CSS.

Then go to Appearance → Edit CSS and copy & paste this rule to the end of the CSS Stylesheet Editor:

header .header-inner-site-branding {
    background-image: url('https://brocksbooks.com/wp-content/uploads/huge-header-2500-DL.jpg');
}

@media screen and (min-width: 480px) {
   header .header-inner-site-branding {
       padding: 80px 0;
   }
}

@media screen and (min-width: 600px) {
   header .header-inner-site-branding {
       padding: 150px 0;
   }
}

Your site will now use the full sized, full resolution image instead of the cropped one.

If you do happen to switch themes, note that there’s this note on the page: Note: Custom CSS will be reset when changing themes.. So copy the CSS somewhere where you can paste it back in if you want to come back to Zillah, or you can also click one of the links on the right to restore the CSS.

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

It’s nice to discover that I can change themes without having to redo all my work. I’ll paste this into the custom css and see what happens. Thanks.