High resolution image cut off in IE 8 and below

**Pixelateur** · Sep 4, 2012 01:07

Hello,

I just launched a new site and have some trouble with the logo in the upper left corner.

This is my HTML:

Code:

<h1>
	<a id="logo" href="/">
		Title
	</a>
</h1>

And this is my CSS:

Code:

#logo {
	position: absolute;
	top: 13px;
	left: 17px;
	width: 201px;
	height: 91px;
	text-indent: -9999px;
	background-image: url(../images/logo.png);
	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.

**ralph.m** · Sep 4, 2012 02:00

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>.