Geek Answers Handbook

MS filters added using jquery

I am working on a project, and one of the tasks is to make the background static and the cover of the entire page. I found this tutorial about this using the "Awesome, Easy, Progressive CSS3 Way". My problem is that I have more pages and each one has a different background, so I need to put the background image on <body> like this:

 <body style="background-image:url(images/mainBg_1.jpg);">

(also css style is placed on <body> and not on "html", as in the example)

As you can see in this link, there are filters for IE, for example:

 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 the <body> , as I wrote above, so I cannot write directly to css (each page has a different background).

Is there a way to add these filters using jQuery? I successfully took the image path from the body, so I only need to paste it into this code and then add it using jQuery for IE <= 8.

Thanks for your answers, following them, I managed to solve my problem. So if someone wants a 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')" }); } });
+7
source share
2 answers

You can use $ ('body'). css () or $ ('body'). attr () and change the body style attribute.

http://api.jquery.com/css/

http://api.jquery.com/attr/

0
source

Test this way
it could be something like:

You add a hidden img element to your page that contains the desired image

 <img class="myBgImage" src="images/mainBg_1.jpg" style="display:none"/>


You get the src image from this 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 add CSS IE to the body of IE to have a VAR for the BG image containing the img src url.

Just an idea.

+1
source

More articles:


All Articles