Pixelated logo

• 

  lovricprojects · Member · Dec 7, 2016 at 10:17 pm

  • Copy link
  • Add topic to favorites

  Hi,
  For some reason my site logo appears pixelated when viewed from the Firefox desktop browser. Seems to be fine with Chrome and Safari. This is despite the original image being clear and relatively hi-res. I have tried to upload the original logo in the displayed pixel size (350×200) so that Fireforx does not need to resize. This did not work. Does anyone have any other solutions? Thanks.

  lovricprojects.com.au

  The blog I need help with is: (visible only to logged in users)

• 

  amakvitaa · Member · Dec 7, 2016 at 10:55 pm

  • Copy link

  It’s normal for some browsers to resize images, so long as they images is clear, you have no problem

  http://Www.blognigeria.com.ng

• 

  lovricprojects · Member · Dec 7, 2016 at 11:02 pm

  • Copy link

  That’s the problem, the image is not clear when viewed through Firefox.

• 

  thesacredpath · Member · Dec 10, 2016 at 2:56 am

  • Copy link

  Hi, you have the site logo inserted at Customize > Site Title and you also have it inserted into your CSS, but you have used “content” instead of background-image in the declaration. Delete what you have in your custom CSS right now and replace it with this

  @media screen and (max-width: 2000px) {
  	#actionbar {
  		display:none
  	}
  }
  .site-branding {
  	width:100%;
  	max-width:422px !important;
  	background-image:url('https://lovricprojects.files.wordpress.com/2016/12/logo350x200-px.jpg');
  	background-repeat: no-repeat;
  	background-size: contain;
  	height: 200px;
  }
  .site-logo {
  	visibility: hidden;
  }