Logo looks grainy

Hi there,

I’m currently building a website for a client and their logo looks grainy no matter what I do. I checked the forums and tried all CSS tricks but I couldn’t make it work.

The logo size is much bigger than actual size so even it’s getting resized, it shouldn’t look this blurry.

The website is currently on a temporary domain and I need to start migrating soon so I’d appreciate if it’s possible to find a solution to this problem.

Many thanks,

Hello Mehmet,

It looks like the original file of your logo image (PNG) is too small.

Try re-uploading larger one. And ensure it’s sharp enough by default.


Hi Kharis,

The image I’m uploading is 2000x800px (x10 bigger than suggested size).

Obviously the cropped image is being scaled down by Wordpress or theme.

Is there a way to avoid this?


My client agreed to move the logo from the header so problem is solved for now.

Hello there,

After uploading an image, there’s skip cropping option.


Doesn’t it present to you?


No I don’t see it.

Anyways, it’s kind of sorted for now. Thanks for your time.

Hello there,

When your current logo is active, you can replace it with a background image logo with this CSS code:

    .site-branding a.custom-logo-link {
      display: block;
      width: 200px;
      height: 80px;
      border: 1px solid red;
      background-image: url('http://yoursite.com/path/to/logo-image.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center left;

    .site-branding a.custom-logo-link img {
      display: none;

Add it to Appearance > Customize > Additional CSS from dashboard.

Replace http://yoursite.com/path/to/logo-image.png with your image URL address, which can be obtained from media library (Dashboard > Media).