Note that there are some explanatory texts on larger screens.

plurals
  1. POMS Filters added with jquery
    text
    copied!<p>I'm working on a project and one of tasks is to make the background static and cover whole page. About this I found <a href="http://css-tricks.com/3458-perfect-full-page-background-image/">this tutorial</a>, 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 <code>&lt;body&gt;</code> like this:</p> <pre><code>&lt;body style="background-image:url(images/mainBg_1.jpg);"&gt; </code></pre> <p>(also the css style is put on <code>&lt;body&gt;</code>, not on "html", like in example)</p> <p>As you can see in that link, there are filters for IE, like this: </p> <pre><code>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.**myBackground.jpg**', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='**myBackground.jpg**', sizingMethod='scale')"; </code></pre> <p>The problem is that "myBackground.jpg" is taken from <code>&lt;body&gt;</code> tag, as I wrote above, so I can't write directly in css (every page has different background).</p> <p>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 &lt;= 8.</p> <p>Thanks for your answers, following them i succeed to solve my problem. So, if somebody wants the code :</p> <pre><code>$(function(){ var mu = $.browser; if (mu.msie &amp;&amp; mu.version &lt; 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')" }); } }); </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload