[gallo75]

Hello,
I've just modify header image on my Metro Pro theme for retina, please follow these steps:
1) Create a version of the logo file with double resolution, call this file [email protected], in the case of Metro Pro the header image is 270 x 80, so your retina version of the header image ([email protected]) should be 540 x 160.
2) Copy this file in the Images folder of your theme: wp-content/themes/metro-pro/images
3) Add the following code at the end of file style.css

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
.header-image .site-title > a {
float: left;
min-height: 80px;
width: 100%;
background: url(images/[email protected]) no-repeat left top !important;
background-size: 270px 80px !important;
}
}

Note: After I did this job the image shown on the page was still the low resolution one, this is due to the cache of the browser (I am working on Safari on a Mac Pro Retina), but I repeat the test after some days and the images was replaced with retina version: so remember to clear the cache of your browser to test this modification.
Regards
Fabio

[Author]

Posts