Menu
I'm working on a project and one of tasks is to make the background static and cover whole page. About this I found this tutorial, using "Awesome, Easy, Progressive CSS3 Way". My problem is that I have more pages and each has a different background so I have to put the background image on <body> like this:
<body style="background-image:url(images/mainBg_1.jpg);">
(also the css style is put on <body>, not on "html", like in example)
As you can see in that link, there are filters for IE, like this:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.**myBackground.jpg**', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='**myBackground.jpg**', sizingMethod='scale')";
The problem is that "myBackground.jpg" is taken from <body> tag, as I wrote above, so I can't write directly in css (every page has different background).
Is there a way to add these filters using jQuery? I successfully took the path of the image from body, so I only need to paste it in this code and then add with jQuery for IE <= 8.
Thanks for your answers, following them i succeed to solve my problem. So, if somebody wants the code :
$(function(){
var mu = $.browser;
if (mu.msie && mu.version < 9) {
var curBg = $('html').attr('style');
curBg = curBg.split('(');
curBg = curBg[1].split(')');
$('html').css({
"filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')",
"-ms-filter" : "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+curBg[0]+"', sizingMethod='scale')"
});
}
});
938
Test this way
it could be something like:
You add in your page a hidden img element that contains your desired image
<img class="myBgImage" src="images/mainBg_1.jpg" style="display:none"/>
You grab the image src from that image class name
var bgImage = $('img.myBgImage').attr('src');
$('body').append("<style>body{progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+bgImage+"', sizingMethod='scale'); -ms-filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src=' "+ bgImage +"', sizingMethod='scale')';}</style>");
And you append to body the css IE fix having for BG-image the VAR holding the img src url.
Just an idea.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
