06-12-2012, 04:51 PM
I have a page that displays a mobile site within an iframe (both on the same domain). The logo at the top and the contact icons above the keyboard of the iPad image are not resizing properly. The problem only occurs with Internet Explorer 8 and 9. I know that both sets of images use special css code to display better image quality on a HD/Retina displays. Everything views fine in the latest versions of Firefox and Chrome, its just MSIE 8 & 9 with the problem. I inherited this site, and my knowledge of CSS, CSS3 etc is very limited. Any suggestions would be greatly appreciated. Link below.
Instead of putting the logo on BG with CSS try this;
<img src="../images/logo.png" width="231px" height="40px" />
06-12-2012, 05:25 PM
Thank you for your reply. It's my understanding that within the css there is code for "background-size" that provides the option to display the logo and icon images with the larger size images when the website is viewed with a mobile device with retina display. If I do as you suggest I believe I would lose that option.
Wll the background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.
And how you want the image to resize anyways you have given specific height and width in pixels for you background-size and the logo div? This will make them X height and X width always. You can use % though if you want the div be always lets say 20% width of the display.
06-12-2012, 11:48 PM
You can use :
width: 350px; height: 75px;
background: url("logo.jpg") no-repeat;