IF you have other logo image in higher dpi then you can use such custom CSS:
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { a#logo{ background: transparent 50% 50% no-repeat; background-size: contain; background-origin: content-box; background-image: url(http://murielpr.flywheelsites.com/wp-content/uploads/2015/09/MPR-Retina.png); /* EDIT HERE */ } a#logo img{ opacity: 0;/* we have image so its display when no styles are applied */ width: 100%; height: auto; display: block; } }
@media only screen and (min-width: 1000px) and (-o-min-device-pixel-ratio: 5/4), only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 1000px) and (min-resolution: 120dpi) { a#logo img{ width: 252px; /* here I inserted dimensions of your current logo */ height: 38px; } }
If this still wont give good results, then please post live link and I will try to adjust it.
I believe I can't see it live, as it appears you have retina screen in your computer, and that why you see this. Style I gave was specially prepared for small retina screens, it didn't take in account big retina screens :-)
Still I don't have such big retina device to be able to see it, and on simulators it works good :-S
Best solution I could think of now would be to write style with specific dimensions of your logo for big retina screens.
I have edited my previous answer again. Give it a try, and tell me how it went.
Thank you for the help, the display size is working well, relatively to the current logo.
In fact, I have a iMac 5K. However, the logo still doesn't displaying sharp as it have to do, I can see that is the same result like the current logo as it appears crispy ; even on iPad and smartphone. That's strange isn't it?
So, if it is the best you can do at this end, thanks again for your help.
Yes, now I see it is again bad on iPad, but it was sharp after last change. Let me check your CSS... Ok, I made few mistakes, now I have tested this code and it works for me. Please use what is below:
@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi) { a#logo{ background: transparent 50% 50% no-repeat; background-size: contain; background-origin: content-box; background-image: url(http://murielpr.flywheelsites.com/wp-content/uploads/2015/09/MPR-Retina.png); /* EDIT HERE */ } a#logo img{ opacity: 0;/* we have image so its display when no styles are applied */ width: 100%; height: auto; display: block; } }
@media only screen and (min-width: 1000px) and (-o-min-device-pixel-ratio: 5/4), only screen and (min-width: 1000px) and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min-width: 1000px) and (min-resolution: 120dpi) { a#logo img{ width: 252px; /* here I inserted dimensions of your current logo */ height: 38px; } }
Perfect retina display on every devices. It works like a charm! Thank a lot for your kind help for this implementation.
One last thing, the logo is "touching" the border browser window's on the left. It is possible to have the code for aligning it just a little bit on the right? i.e align like "Follow".
Comments
IF you have other logo image in higher dpi then you can use such custom CSS: If this still wont give good results, then please post live link and I will try to adjust it.
With kind regards.
As I strictly follow your instructions, it still won't give results.
Here is the live link to investigate : http://murielpr.flywheelsites.com
Thanks for your kind help.
FYI the high dpi logo image is 1024x155 px @144 dpi
a.logo
toa#logo
.You can copy it again.
With kind regards.
Thank you for your help and fast response.
I copied the exact fixed code, and the logo appears very tiny.
I do not understand why?
Regards.
With kind regards.
Here is the screenshot. You can see with the live link http://murielpr.flywheelsites.com
Regards
Still I don't have such big retina device to be able to see it, and on simulators it works good :-S
Best solution I could think of now would be to write style with specific dimensions of your logo for big retina screens.
I have edited my previous answer again. Give it a try, and tell me how it went.
With kind regards.
Thank you for the help, the display size is working well, relatively to the current logo.
In fact, I have a iMac 5K. However, the logo still doesn't displaying sharp as it have to do, I can see that is the same result like the current logo as it appears crispy ; even on iPad and smartphone. That's strange isn't it?
So, if it is the best you can do at this end, thanks again for your help.
Kind Regards.
Ok, I made few mistakes, now I have tested this code and it works for me. Please use what is below: Hope this time!
With kind regards.
Thank a lot for your kind help for this implementation.
One last thing, the logo is "touching" the border browser window's on the left.
It is possible to have the code for aligning it just a little bit on the right? i.e align like "Follow".
Thanks and best regards.
I forgot to add one rule
background-origin: content-box;
. I have updated code now, and it will fix this issue.With kind regards.
Have a great day!
Best regards.