Retina (HiDPI) grahics and images in Pagelines

[britten_uk 0]

So I wonder if anyone has thought about how to tackle retina graphics yet? I realise its not common yet but it surely will be soon!

I have an iPad 3 and whilst most of my site (brittenweddings.co.uk) looks ok on it (images are resized down to the ipad screensize so their res is a bit higher than normal) the same is not true on Macbook Pro retinas and the icons and header logo look dreadful on both!

Does anyone have any experience of the various Wordpress plugins available (do they play nice with Pagelines?) or is there an easier way I am missing?!

Thanks. Mat

[Danny+ 1,327]

Hi,

You will probably want to do is create your images double in size and then use the background-size property for example:

.logo {

background: url(URL to Image) no-repeat;

background-size: 100px 100px;

height: 200px;

width: 200px;


}

[/CODE]




You can also use percentage also like below:





[CODE]

.logo {

background: url(URL to Image) no-repeat;

background-size: 50% auto;

height: 200px;

width: 200px;

}

[Simon 248]

We use this plugin http://wordpress.org/extend/plugins/wp-retina-2x/

[britten_uk 0]

Thanks for the input, I couldnt see any difference with your CSS fix Danny so I'm trying the plugin now - will update with my experiences if I get the chance!

Mat

[James B 436]

We'll leave this thread open for you, keep us posted.