Rank images blurry fix or SVG

[Costheme]

Hi guys. Since we can't use SVG images for ranks, I just want to share with you a quick fix for blurry images ( Images get blurry when we resize them via CSS. As an example, take a look at the ranks images on this website).

blurry.png (6.99 KiB) Viewed 813 times

crisp.png (5.46 KiB) Viewed 813 times

To fix the blurry effect, you can use this:

Code: Select all

.profile-rank img {
	max-width: 160px; /* In my case the original size is 480x90px */
	image-rendering: -moz-crisp-edges;  /* Firefox */
	image-rendering:   -o-crisp-edges;   /* Opera */
	image-rendering: -webkit-optimize-contrast;   /* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

[Archan]

Where would I put this code?

[PlanetStyles.net]

Where would I put this code?

At the bottom of common.css file in your 'theme' folder is probably safest.

Refresh browser cache to see changes