pixelateur — 2012-09-04T04:07:57-04:00 — #1
I just launched a new site and have some trouble with the logo in the upper left corner.
This is my HTML:
<a id="logo" href="/">
And this is my CSS:
background-size: 100% 100%;
I should mention that I uploaded the logo.png file in a size 402 x 182 px to make it look crisp on retina displays.
This strategy works out brilliantly across most modern devices. However in Internet Explorers 8 and below only a quarter of the logo is visible. The rest is cut off.
Is there a way to get this working at all?
Thanks for any help.
ralphm — 2012-09-04T05:00:06-04:00 — #2
Background-size is a CSS3 property, unknown to older browsers. Given the way you are going about this, you might as well just put the image in the HTML rather than as a background image, and then set the widths on the image rather than on the <a>.
pixelateur — 2012-09-04T07:27:27-04:00 — #3
Yap, that worked great. Thanks for your help, Ralph!
ralphm — 2012-09-04T07:29:52-04:00 — #4
No worries. Glad it helped.