Support » Theme: Typit » header image / masthead background

  • Hi
    I’ve set up an image as header image in customise, which looks great on the front page. But, on subsequent pages the same header image is all pixelated, blurred and grainy.
    Can I fix this?
    Cheers
    Mike

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi Mike,

    Can you provide a link to your site, and I will check this out?

    I provided it in the question form?

    it’s http://www.mikebird.uk

    Also i’ve just added a blog page and that header image is just a Orange background?

    Thanks for the link Mike, it helps a lot because I noticed there are a few things out of place, such as the shadow on either side of the content column is not where it should be. After looking at the source code, it appears the header was set with a specific height:

    #masthead{
    max-height:450px;
    }

    Removing that will solve that one issue.

    The pixelated image on the other page is lloading this:

    <img src="http://www.mikebird.uk/wp-content/uploads/2019/03/Nailsea-wide-banner-2-1010x173.jpg" alt="About Nailsea">

    But the one on the front page is loading this:

    <img src="http://www.mikebird.uk/wp-content/uploads/2019/03/Nailsea-wide-banner-2.jpg" height="828" width="4823" alt="Mike Bird">

    Notice the two different image sizes? The first one is an image file named Nailsea-wide-banner-2-1010×173.jpg while the other is Nailsea-wide-banner-2.jpg

    The theme is coded to make sure any image at the top is covering the area, regardless of the browser window size. So what is happening, the smaller image being used is getting stretched more, hence the blurry pixelated effect.

    You will want to make sure that the inner page(s) is using the same image as the front page.

    For the orange header, you need to add an image to the “Featured Image” box in the editor when you have that page open in it. That will cover the area. If some pages have Featured Images while others don’t, the default colour background shows.

    WordPress naturally produces different sizes of each image upload, so it’s usual to have these different files in the same folder.

    The question is, why is the lower resolution file/image being called by the Theme on that page? When the Header image should be set under ‘customise’?

    And why is there only an Orange background on the other ‘blog’ page

    The removal of max height restriction on Masthead, doesn’t cure anything. I fact it makes it worse as the low resolution image is stretched even further.

    I want a banner type image as displayed

    I’ve now forced the masthead background to be blue, via customise CSS.

    Main front page is using ‘header-custom-image’, this is the styling I want throughout every page.
    But the other pages are are using ‘header-image-caption’ which does echo ‘get_the_post_thumbnail_url’. I’ve replaced this with the whole header-image echo from ‘header-custom-image’ and that now works.

    I’m still unsure why the blog page only has a background and no image

    WordPress handles images (and media) oddly. But the user should have a lot of control over what images are using if a setting to insert an image exists. Sounds like there is a glitch somewhere though.

    I meant to ask if you were aware of the setup tutorials for this theme? If not, they might give additional help as this theme is a little tricky for the header area. You can find them HERE

    Just put the same routine into ‘site-header’, now have an image 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘header image / masthead background’ is closed to new replies.