[jasonleicester]

Hi,

Is there a way I can through css media queries, specify a different image for the header title logo, for example to use an image re-done at a resolution aimed for a smaller mobile device, as the full size logo at 1200×136 doesn’t resize well ?

I’m trying the following with the custom css pane;

@media screen and (max-width: 479px) {
.title img { max-width:100%; src:url(“http://..website.co.uk/wordpress/wp-content/uploads/2013/01/bannerlogo286x65.png”) 0 50% no-repeat;}
}

Thanks
Jason

[ahmetsali]

Hi, it is not possible to set img src attribute via css. You can switch background images via css.

But it is possible to set src attr of an image with js;

$(function() {
  if($(window).width() < 479) {
       $('.title img').attr('src','small-image-url-here.png');
}
});

[jasonleicester]

Thanks. The javascript works but to the resolution the browser is in at the time of a browser refreshand doesn’t re-run following a resizing of the window or if you turn the mobile from portrait into landscape. Is there a way to get the javascript to run following a window resize?

Thanks for you excellent support
Jason

[jasonleicester]

Actually, I just figured it out using window.resize as in the below. Thanks again for pointing me in the right direction. Jason

$(window).resize(function() {
if($(window).width() < 480) {
$('.title img').attr('src','http://www.website.co.uk/wp/wp-content/uploads/2013/01/logo-286.png&#039;);
}
else
{
$('.title img').attr('src','http://www.website.co.uk/wp/wp-content/uploads/2013/01/logomain.png&#039;);
}
});