We have two logos set for our one page site – one for the transparent header and the other for the scrolled header. We used some code – .logo {height: 251%;} – to make the transparent header logo larger so it drops below the header.
On retina display, however, the logos seem to be blurred. We’ve tried the solutions in this thread: https://kriesi.at/support/topic/blurry-logo/ and we haven’t seen an improvement.
Are there any other solutions we could try?
Hey jaimemerz,
Can you please upload your logo in double size? Image itself looks blurry on my end.
Best regards,
Yigit
I implemented the double sized logo and you will see that it’s even more blurry, but I have noticed that when I start to scroll it will suddenly become perfectly crisp – and then become blurry again.
Hi!
Transparent logo is not blurry on my end anymore. I am using a macbook pro with retina display. However when i scroll, initial logo becomes blurry. It is uploaded in 182x79px. Please try uploading it in double size as well :)
Best regards,
Yigit
The transparent logo is still blurry on our end. I have placed the scrolled logo at double size and it is also blurry on our screens.
Hi!
From where to you export the image?
Are you using photoshop or an other system?
Can you please add the retina on the end of the image @x2 so we can see if that will work better?
Thanks a lot
Regards,
Basilis
We re-uploaded both images again with at-2x-retina added to the filename. They look better now, we are satisfied with the crispness of the logos at this time.