0

In my website (it's just for test), I added a background-image as logo just beside heading in #title. It is working fine in Chrome and firefox but not in IE8.

When I tried adding jpg format images as logo instead, It is working fine in IE8. and then I tried using a squared png image which was also worked.

Then I realized that IE8 is not working if I use Non-squared images as shown below:

enter image description here

Anyway to make it work in IE8?

Bill
  • 3,478
  • 23
  • 42
Mr_Green
  • 40,727
  • 45
  • 159
  • 271
  • Stick it inside a div? – David Mar 27 '13 at 14:20
  • @David it's already in a div. – Mr_Green Mar 27 '13 at 14:20
  • I can only view it in a mac vm IE8 and it looks fine, can you describe the problem? – Huangism Mar 27 '13 at 14:23
  • @Huangism the image is not visible in IE8, windows 7 OS. In other browsers, it is working fine. – Mr_Green Mar 27 '13 at 14:24
  • 1
    when you say image isn't square do you mean it's transparent? As i'm pretty sure the image file is square just with transparency around the 'drawn section' in the middle – TommyBs Mar 27 '13 at 14:24
  • 1
    The image dimensions are 800x800. In IE8, it **is** being shown, but the little square can only show the upper left corner of the image. (I'm actually a little confused as to why it does work in other browsers.) – Pointy Mar 27 '13 at 14:25
  • @TommyBs Yes sorry, I don't know what actually it is said. yes the correct word is `transparent`. – Mr_Green Mar 27 '13 at 14:26
  • @Pointy shoot that could be the correct problem. didn't check it. – Mr_Green Mar 27 '13 at 14:27
  • 1
    Your problem isn't with the image itself, your problem is that you're using the `background-size` CSS property. [IE8 doesn't support it](http://stackoverflow.com/questions/13635717/background-size-ie8-problems). – Adi Mar 27 '13 at 14:29

2 Answers2

3

The problem is because IE8 doesn't support the CSS background-size property.

If you want to support IE8 and you want to use a background image, you'll need to supply an image that actually fits into the space you're giving it, rather than asking the browser to scale it for you.

The alternative is to have it as a foreground image in an <img> tag instead of a background image. That will allow it to be scaled.

Spudley
  • 166,037
  • 39
  • 233
  • 307
3

It is working. You just think it's not.

Background-size is not supported in IE 8 (http://caniuse.com/#search=background-size) ;

Therefor, it's using it with the size that the image is (800x800). You are seeing the image. It's just that you're seeing the top-left corner of the image, which happens to be transparent. enter image description here

Wanna see what I mean? Open up your favorite modern browser, open up your inspector tools, and remove the background-sizing property. "Where'd the image go?" It's still there. Now, make the logo div much bigger: 800x800 in fact. The image is back. You've basically emulated how IE8 is displaying the image (not the resizing the div part).

Since you know the size you want your logo to be, simply use an image that is the proper size and you won't actually need to background-size property.

isotrope
  • 1,847
  • 12
  • 10