CODEWITHSUNDEEP
cssinternet-explorer
shankie_san
shankie_san

Reputation: 181

Internet Explorer bicubic background image rescaling

I'm having a bit of trouble with IE downscaling CSS background images using the background: and background-size: attributes, as below

.llifLogo {
background: url(images/llifmonotagline.png) no-repeat center;
background-size: 550px;
position: absolute;
top: 60px;
width: 100%;
height: 170px;

}

The site is live on http://llif.co.uk. Looks great in other browsers, but IE appears to downscale the image using nearest-neighbour rather than bicubic. I understand that there used to be a hack by using -ms-interpolation-mode: bicubic;, but that this is now deprecated.

Anyone have any ideas how to downscale background images nicely in IE?

I should also add why I want to do a background image rather than just a regular image: it's so that I can use media queries to display a different image when the site is in a narrow viewport such as a mobile device.

Thanks!

Upvotes: 4

Views: 656

Answers (1)

BorisTB
BorisTB

Reputation: 1806

The best (and probably the only) way to do this is to resize your .png file. There's no reason to use 2808x1024 png with file size about 85KB, when you can resize your file to 550x201px and it will have ~15KB and will be nicely rendered. Just use @media queries to switch between pngs with different resolution.

Upvotes: 1

Related Questions