What's new? | Help | Directory | Sign in
Google
             
Search
for
Updated Nov 15, 2008 by pilgrim
Labels: is-article, about-dom, about-css
ArticleTransparentBackgroundImage  
HOWTO set the background of an element to a transparent image (goog.style.setTransparentBackgroundImage)

TODO intro

The code

/**
 * Sets the background of an element to a transparent image in a browser-
 * independent manner.
 *
 * This function does not support repeating backgrounds or alternate background
 * positions to match the behavior of Internet Explorer. It also does not
 * support sizingMethods other than crop since they cannot be replicated in
 * browsers other than Internet Explorer.
 *
 * @param {Element} el
 * @param {String} src The image source URL
 */
goog.style.setTransparentBackgroundImage = function(el, src) {
  var style = el.style;
  if ('filter' in style) {
    style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(' +
        'src="' + src + '", sizingMethod="crop")';
  } else {
    // Set style properties individually instead of using background shorthand
    // to prevent overwriting a pre-existing background color.
    style.backgroundImage = 'url(' + src + ')';
    style.backgroundPosition = 'top left';
    style.backgroundRepeat = 'no-repeat';
  }
};

The code walkthrough

TODO walkthrough

Further reading

TODO further reading


Comment by dgarciax, May 22, 2008

También se puede utilizar un fichero HTC externo para cargar el script. Más info: http://www.exelweiss.com/blog/259/solucion-png-transparencia-ie-internet-explorer-6/

Comment by duxinhua, May 28, 2008

Can I use PNG images?

Comment by bobkadler, Jun 24, 2008

Yes! This method created for png images displaying in IE. All gecko based browsers shows png alfa correctly.


Sign in to add a comment