Hi Lori,
You’re using the right CSS there. The problem is the image that’s being loaded in the browser is only 80×80, so by using CSS to make it bigger, you’re stretching the image, causing the blurriness.
Unfortunately this cannot be avoided. When you set the logo and crop it, a cropped version of the image, already resized, is created on the site, and that file is the one that ends up being loaded on the site.
If the theme loaded the original file and merely resized it using CSS, it would have been possible to use CSS to make the container for the image larger, thereby causing the image to expand again. But in this case the theme uses a generated image that’s only 80×80 to start with, so the image cannot expand, it can only stretch, and you’ll always see quality loss with that.
Have you considered setting the logo as a custom header instead? This theme’s header dimensions are 1140 × 223, so if you create an image of that size that’s transparent, with the logo exactly centered horizontally and the same height, that might work. You can then always use CSS to make that header image smaller if you wanted.
Thanks, I ended up doing the header instead.
