Broken Background Images In Internet Explorer

I should take it for granted that I’m going to have to resort to some sort of chicanery to get my CSS to work in Internet Explorer. Today, my background images weren’t appearing in certain elements on IE but were working beautifully on Chrome, Firefox, Safari, Opera, and every flavor of Webkit I could find.

Here’s my original CSS (yes, I’m working in WordPress again):

.widget-title {
backround-image: url(/wp-content/themes/mytheme/widget-header.jpg);
}

Easy, right?

Over the years, my hat for Internet Explorer has evolved into a warm, constant disdain. I’ve accepted it, accepted that I hate it, and accepted that while it may improve on some of the traits that irk me, it will introduce new traits for me to loathe.

Fortunately, this CSS background image problem as been around since about IE 5.5, so with a quick look on Google, I found a solution using filters. Here’s the new code:

.widget-title {
backround-image: url(/wp-content/themes/mytheme/widget-header.jpg);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='c',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/wp-content/themes/mytheme/widget-header.jpg',
sizingMethod='scale')";
}

So, after only half an hour of banging my head on the wall, my CSS background images work.

Leave a Reply