Here’s the recipy, follow the first 4 steps if you don’t know JavaScript. If you do, you should read on to the finish, it may save you some grief later.

1st. download these two files and save them in the same folder as your index.html:
* http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js
* http://design-forge.ro/projects/opensource/transBG.jquery.plugin.js

2nd. write these lines into the <head> of your website
* <script type=”text/JavaScript” src=”jquery-1.2.6.min.js”></script>
* <script type=”text/JavaScript” src=”transBG.jquery.plugin.js”></script>


3rd. decide what CSS selectors to use. jQuery uses CSS selectors to ”grab” the object(s) you need.
* I may want to apply the background to a speciffic object reffered to by ID and the CSS selector necesary to find that object will be ”#id”
* I may want to apply the background to a speciffic type of objects reffered to by TAGNAME and the CSS selector necesary to find that array of objects will be ”div”
* I may want to apply the background to a speciffic class of objects reffered to by CLASS and the CSS selector necesary to find that array of objects will be ”.classname”
* jQuery accepts even complex CSS selectors, and also has extra pseudo-clases that CSS does not have, in case you know your CSS well.

4th. write the JavaScript commands in the <head> section, bellow the other <script> tags

<script type="text/JavaScript">

$(document).ready(function()

{
$(”#id”).transBGdraw();
$(”#menu”).transBGdraw();
$(”#container”).transBGdraw();

// !!!IMPORTANT!!!
// if you use tagnames
// or classes, make sure
// every object affected
// has a unique id.
$(”div”).each(function()
{ $(this).transBGdraw(); });

$(”h6”).each(function()
{ $(this).transBGdraw(); });

$(”.class1”).each(function()
{ $(this).transBGdraw(); });

$(”.text”).each(function()
{ $(this).transBGdraw(); });

$(”.information”).each(function()
{ $(this).transBGdraw(); });

});

</script>

5th. All the elements that get a transparent background are included in the class ”.transBG” so if you insert data into your page via AJAX you will need to call $(”.transBG”).each(function() {$(this).transBGredraw();}); to redraw every one of the objects that have a transparent backround, or you could call the redraw function only for the elements that the AJAX affects.

6th. You can modiffy the CSS of the transparent background by calling the method transBGdraw() with an argument like this $(”#myobject”).transBGdraw({’z-index’:’5’, ’background-color’:’#f00’, ’opacity’:’0.20’}); or by adding settings to your CSS for the element that has the id=”myobjectTransBG”.

7th. The transparent background effect is created by adding an object behind the data-object that needs the background. The data-object needs to have an ID so that the ID of the background object cand be set as ”initialID”+”TransBG”.

8th. Known issues: The transparent BG object will be correctly placed behind the desired object only if the object has natural or flowing positioning. If you position your object with absolute positioning and z-index settings you will need to match the z-index setting for the background object.

For those of you looking for another solution to this problem: Another solutions make use of a fully transparent gif file, a one pixel transparent gid picture that is used to filter the transparent areas for the item in need of transparency. It works on all normal browsers except on IE6 which unfortunatly still represents some 20% of browser users world wide. To repair this dillema, the ones who created this solution used an IE6 proprietary (IE6 speciffic) css rule. Which “fixes” the fact that IE6 does not render png files as it shoud by adding an external filter that can render pngs corectly without the filter IE6 makes the png images look non transparent as if a white object was directly behind them). There are only two downsides to using this solution: having to create the semitransparent png files every time you need to discreetly alter the transparency of the object (even by 1%); and not being able to use any background-repeat properties for the object with the transparent background (a flaw of the aforementioned external filter that canot render the png images recursively inside a repeating background object… the filter is called only once). If you find this solution more usefull here’s a link torwards the “png fix” site http://homepage.ntlworld.com/bobosola/ all you must do is set your objects background image to a semi-transparent png file and then follow the instructions given on the png fix site.

Possibly related posts: (automatically generated)