Cross Browser PNG Transparency: Part 2

This is Part 2. See Part 1.

In October, I posted about cross browser PNGs. Since IE7’s adoption rate is glacially slow, the topic is still relevant. That it’s still relevant is also evidenced by the number of referrals I get on this topic- People are interested in doing this stuff.

One thing I didn’t mention the last time and promised to, was using PNGs as background images. This post will go through the two remaining sizingMethod attributes that allow developers to use PNGs as background images that either tile (or in the case of IE6 stretch or scale in ways that can mimic tiling) to fill or are clipped by the containing block level element.

Images used as backgrounds – tiling (and scaling)

If you need to use a thin strip of image to style a component of variable width or height, you need to be able to tile that image. As before, with Firefox, IE7 and other browsers with native PNG support there’s no difference with how you would handle that technique when compared with a regular GIF of JPG. Simply set the background image and allow it to repeat (which is the default behavior :))

Here’s the HTML for the above example

<div id="tile-example">This is a DIV with a semi-transparent, tiling background</div>

Nothing ground-breaking there.

Here’s the CSS.

#tile-example {
position:absolute;
width:200px;
height:200px;
z-index:1;
left: 50px;
top: 10px;
background:url(tile-example.png);
padding:10px;

}

Again, nothing groundbreaking. Native support is like magic.

For IE6, there’s one major caveat. IE6 doesn’t actually support tiling. IE6 supports “scaling.” Which basically means that the image pulled into the object with the filter fills the entire block. If you’re looking to fill a block with a 1 pixel high image that is set to the width of the block (which is exactly the situation I’ve always used this technique) then the below will work for you. If you’re looking to tile an image to fill a variable width background or to fill up a background with a repeating image (think of the typical Geocities site in 1999) then I’ve got nothing for you.

With the above warning out of the way, on with the hows. With IE6 we use a similar technique to the one outlined before, with a couple of key differences.

Sidetracked! Conditional Comments

Since I didn’t mention it before, I’ll do so here. When doing anything specifically for IE, I take advantage of Microsoft’s Conditional Comments. So, for example, when including a style sheet to enable cross browser PNG transparency, I would do so using the following code:

<!--[if gte IE 5.5]>
<![if lt IE 7]>
<link rel="STYLESHEET" type="text/css" href="transparency/ie.css" />
<![endif]>
<![endif]-->

For IE, that reads “If the browser is greater than IE 5.5 but less than IE7, include the following style sheet.” Every other browser reads it as a plain HTML comment, so we can stuff whatever IE specific stuff we want in the IE specific sheet and the rest of the world is none the wiser. That allows me to stay away from hacks (although I’m still know to use the underscore hack from time to time) and allows my main style sheets to validate.

In other words, I hide my shame.

Seriously though, I can’t recommend conditional comments enough. The technique validates and it’s more future proof than relying on hacks (MS has stated that they will support conditional comments going forward.)

Back to the topic at hand

In the above style sheet we have the following CSS declaration:

#tile-example{
background:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/web/samples/transparency/tile-example.png',sizingMethod='scale');
}

Unlike the previous image replacement example where we had to hide the child image and load the parent container with the filtered PNG, here we have to remove the regular background image declaration, setting it to none and then load the parent container with the filtered PNG. The other difference is with the second argument of the AlphaImageLoader filter. Here we set sizingMethod to “scale” which, as I mentioned above, with certain image configurations is the equivalent of setting the CSS background-repeat property to repeat. It’s not really. What’s happening isn’t tiling at all, but stretching of the image to fit the entire container. In the two ways I’ve ever used this technique that didn’t matter- like here where I used it to “tile” a wide, single pixel high image across the entire height of a container or where I’ve used a single pixel, semi-transparent image to fill in the background of a div. If you were trying to tile a png in the strictest sense of the word, this technique would fail.

Images used as backgrounds – crop

This is a situation where you have a larger background image that you want the containing div to crop out as necessary. The size of the image in the below example is 400px by 400px. I’ve added a blue border to the div to show the edges. Click expand or shrink, in the example to see the cropped area change.


Here’s the HTML

<div id="crop-example">This is a DIV with a semi-transparent, cropped background</div>

Here’s the CSS

#crop-example {
position:absolute;
width:300px;
height:150px;
z-index:1;
left: 50px;
top: 35px;
background:url(crop-example.png);
padding:10px;
border:1px solid blue;
}

and the IE specific code:

#crop-example{
background:url();
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/web/samples/transparency/crop-example.png',sizingMethod='crop');
}

As you can see it’s very similar to the previous example, except for the sizingMethod argument, which is here set to “crop.” Crop maintains the aspect ratio of the original image, but allows the container to clip it where applicable.

And that’s that. Feel free to ping me with questions if I’ve lost you anywhere along the way. I’ve done this piece in fits and starts over the past few days so some things could have slipped through the cracks…

This entry was posted in Web. Bookmark the permalink.

45 Responses to "Cross Browser PNG Transparency: Part 2"

Leave a reply