Archived

This topic is now archived and is closed to further replies.

  • 0

Retina (HiDPI) grahics and images in Pagelines


Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

4 answers to this question

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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;
}

Share this post


Link to post
Share on other sites