Blurry header image

  • Hi,
    I love the Startup Blog Theme, but only have one issue: The header image is always blurry, no matter which size or dpi I upload it with. I tried different images to see if it makes a difference but they are all blurry once the image is live (they are not blurry on my screen before). Is there anything I can do to fix this?
    Thanks, Caroline

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Theme Author Ben Sibley

    (@bensibley)

    Hi Caroline,

    Thanks for using Startup Blog!

    I think there’s a compatibility issue with whichever plugin is active on the site for lazy loading and image optimization, but I think we can work around it.

    Please try adding the following CSS to your site:

    .header-image {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
}
#site-header {
  background: #104e8b;
}

    You can copy & paste the code above into the “Additional CSS” section in the Customizer (Appearance > Customize), and it will take effect right away.

    That is going to limit the header image to its natural dimensions of 1200x360px and then fill in the surrounding space with the same background color.

    When testing this code out in a preview, the image looked just as sharp as it does on its media file page on your site here: https://caroharsch.com/wp-content/uploads/2020/02/cropped-CaroHarsch-Logo-1.png

    Thread Starter caroharsch

    (@caroharsch)

    Hi Ben,
    thank you so much! It worked right away!
    Thanks for the quick and easy support, all the best,
    Caroline

    Theme Author Ben Sibley

    (@bensibley)

    You’re welcome! Stay in touch if you need anything else and I’ll be happy to help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Blurry header image’ is closed to new replies.