Hello,
I just launched a new site and have some trouble with the logo in the upper left corner.
This is my HTML:
<h1>
<a id="logo" href="/">
Title
</a>
</h1>
And this is my CSS:
#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.