CSS PNG Transparency

Working With Backgrounds in CSS 2

The Background Shorthand Property

background: transparent url(images/image.png) left top scroll no-repeat;

One important thing to note is that the background accounts for the contents of the element, including the padding and border. It does not include an element's margin. This works as it should in Firefox, Safari and Opera, and now in IE8. But in IE7 and IE6 the background does not include the border.

Background Color

The background-color property fills the background with a solid color. There are a number of ways to specify the color.

background-color: black;
background-color: rgb(0, 0, 0);
background-color: #000000;

The background-color property can also be set to transparent, which makes any elements underneath it visible instead.

Background Image

The background-image property allows you to specify an image to be displayed in the background. This can be used in conjunction with background-color, so if your image is not tiled, then any space that the image does not cover will be set to the background color. The path of the image is relative to the style sheet. So, in the following snippet, the image is in the same directory as the style sheet.

background-image: url(image.jpg);

Background Position

The background-position property controls where a background image is located in an element. The trick with background-position is that you are actually specifying where the top-left corner of the image will be positioned, relative to the top-left corner of the element.

In the examples below, we have set a background image and are using the background-position property to control it. We have also set background-repeat to no-repeat. The measurements are all in pixels. The first digit is the x-axis position (horizontal) and the second is the y-axis position (vertical).

The background-position property also works with other values, keywords and percentages, which can be useful, especially when an element's size is not set in pixels.

The keywords are self-explanatory. For the x-axis: left, center, right. And for the y-axis: top, center, bottom

background-position: left top; /* The top-left corner of the image. */
background-position: -10px top; /* Move the image to the left. */
background-position: 100% top; /* Move the image to the right. */
background-position: 0 -46px; /* Move the image up. */

Background Attachment

The background-attachment property determines what happens to an image when the user scrolls the page. The three available properties are scroll, fixed, and inherit.

Inherit simply tells the element to follow the background-attachment property of its parent.

When we set background-attachment: scroll;, we are telling the background that when the element scrolls, the background must scroll with it. In simpler terms, the background sticks to the element. This is the default setting for background-attachment.

When we set the background-attachment to fixed, we are telling the browser that when the user scrolls down the page, the background should stay fixed where it is - i.e. not scroll with the content.

Background Repeat

By default, when you set an image, the image is repeated both horizontally and vertically until the entire elemtn is filled. This may be what you want, but sometimes you want an image to be displayed only once or to be tiled in only one direction. The possible values (and their results) are as follows:

background-repeat: repeat; /* The default value. Will tile the image in both dicrections. */
background-repeat: no-repeat; /* No tiling. The image will be used only once. */
background-repeat: repeat-x; /* Tiles horizontally (i.e. along the x-axis). */
background-repeat: repeat-y; /* Tiles vertically (i.e. along the y-axis). */
background-repeat: inherit; /* Uses the same background-repeat property of the element's parent. */

View Demo

How to fix PNG-24 transparency for IE6?

With CSS

/* For IE7 and Modern Browsers */
.classname {
    background: transparent url(images/image.png) left top scroll no-repeat;
}
/* For IE6 */
*html .classname {
    background-image: none;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/picture.png", sizingMethod="scale");
}

With JavaScript

/* For IE6 */
element.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/picture.png", sizingMethod="scale")';

PNG-24 Pitfalls

Background Images Cannot Be Positioned Or Repeated

The AlphaImageLoader does work for background images, but only for the simplest of cases. If your design requires the image to be tiled (background-repeat) or positioned (background-position), you are out of luck. The AlphaImageLoader allows you to set a sizingMethod to either crop the image or to scale it to fit.

Delayed Loading And Resource Use

The AlphaImageLoader can be quite slow to load, and appears to consume more resources than a standard image when applied. Typically, you'd need to add thousands of GIFs or JPEGs to a page before you saw any noticeable impact on the browser, but with the AlphaImageLoader filter applied Internet Explorer can become sluggish after just a handful of alpha channel PNGs.

The other noticeable effect is that as more instances of the AlphaImageLoader are applied, the longer it takes to render the PNGs with their transparency. The user sees the PNG load in its original non-supported state (with black or grey areas where transparency should be) before one by one the filter kicks in and makes them properly transparent.

Links Become Unclickable, Forms Unforcusable

There is a bug/weirdness with AlphaImageLoader that sometimes prevents interaction with links and forms when a PNG background image is used. This is sometimes reported as a z-index issue.

Often this can be solved by giving the links or forms elements hasLayout using position: relative; where possible.

Related Posts

• Getting Creative With Transparency in Web Design
• Backgrounds In CSS: Everything You Need To Know
• Transparent PNGs in Internet Explorer 6
• PNG Transparency for Internet Explorer (IE6 and Beyond)
• Creative Use of PNG Transparency in Web Design