Setting a lower size to the logo but maintaining the quality(Sela Theme)

• 

  larshvinden · Member · Sep 4, 2016 at 7:09 am

  • Copy link
  • Add topic to favorites

  Hi,

  How can I have my Sela Theme scale down a larger image without losing the quality? Is there a CSS code I could use for this?
  Right now my logo looks very grainy as I used the wordpress tool to minimize it to 300 x 160.

  Best
  Lars

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

• 

  thesacredpath · Member · Sep 6, 2016 at 7:10 am

  • Copy link

  Hi Lars, what I would suggest is to edit from your original logo image file in an image editing program on your computer and save it at 300px x 100px, upload that new image to your media library and then use that image as your logo image. See if that doesn’t take care of the issue and let me know.

• 

  larshvinden · Member · Sep 6, 2016 at 4:11 pm

  • Copy link

  Hi, thanks for the tip. Already tried that, I need CSS that can scale down a high res image. Or else it does not look good. Take a look at my site on a cellphone and you will see. Big difference in quality of the logo and the blogpost image. Can you help with some CSS?

• 

  thesacredpath · Member · Sep 7, 2016 at 8:54 am

  • Copy link

  Hmmm, ok give this a try then. What I’ve done is to set the existing logo to hidden and then inserted the image via CSS into the “a” element. It’s about the best I can do.

  .site-logo-link {
      background: url("https://larshvinden.files.wordpress.com/2016/08/lh-01-high-resolution1-e1472290421916.png") no-repeat scroll center top;
      display: block;
  }
  .site-logo {
      visibility: hidden;
  }

  I don’t see a lot of difference though.

  The other thing to keep in mind is that a Macbook Pro 15″ Retina display is 220dpi whereas iPhones 5’s are 326, and 6 Plus/6s Plus are 401.

  I also noticed that your logo image is only 72dpi. I would suggest it be twice that at 144dpi. Regina display will show the image at the higher dpi.