I've recently taken on a project that involves making the background static and covering the entire page. While searching for a solution, I came across this helpful tutorial which detailed an "Awesome, Easy, Progressive CSS3 Way". However, my project has multiple pages with different backgrounds, so I had to place the background image directly on the <body> tag like this:
<body style="background-image:url(images/mainBg_1.jpg);">
(unlike the example where the CSS style is applied to the <body> instead of "html")
As shown in the tutorial link, there are filters specifically for IE, such as:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.**myBackground.jpg**', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='**myBackground.jpg**', sizingMethod='scale')";
The issue arises when the "myBackground.jpg" path is fetched from the <body> tag, making it impossible to include directly in the CSS (due to varying backgrounds on each page).
Is there a method to implement these filters using jQuery? After successfully obtaining the image path from the body, all that's left is to insert it into the code and apply it via jQuery for IE versions 8 and below.
Thanks to the guidance received, I was able to overcome this challenge. For those interested, here is the code:
$(function(){
var browser = $.browser;
if (browser.msie && browser.version < 9) {
var currentBg = $('html').attr('style');
currentBg = currentBg.split('(');
currentBg = currentBg[1].split(')');
$('html').css({
"filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+currentBg[0]+"', sizingMethod='scale')",
"-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+currentBg[0]+"', sizingMethod='scale')"
});
}
});