Menu Search
Jump to the content X

Getting Creative With Transparency in Web Design


Arm yourself with the knowledge of how different file types of images can be used to achieve transparency on web-pages. It’s important to first understand these basics. Then learn how to push the limitations of browser support. Take a look at what others are doing with transparency on the Web; only then you’ll be able to learn how to get creative with transparency in Web design.

There are well-established methods of imitating Web transparency that have been developed to overcome browser support issues. While we can appreciate past solutions, it’s important to break out of this faux methodology and learn to work with PNG graphics. We are at a tipping point where IE7 continues to grab market share. And fortunately, IE7 has thet support for full Alpha Transparent PNG graphics. In the near future, transparent PNG graphics will have excellent browser support.

Ultimately, it’s necessary to consider creative uses for transparency on the Web. This article reviews the use of faux transparency methods, presents examples of transparent images on both fixed and dynamic backgrounds, and points to creative solutions that take full creative advantage of today’s modern Web transparency effects.

1. Learn How to Overcome Web Transparency Browser Limitations Link

There are different types of inherent limitations with creating transparency for web-sites. Currently, if you’re going to work with PNG graphics, you’ll need to harness IE6, which has poor support for alpha transparency. This means working with IE specific code, or scripting-based solutions.

It’s important to know most common ways to overcome browser limitations. There are plenty of articles across the Web that review these issues. There are two articles below that describe Conditional Comments and a script-based solution. First though, review Jeff Croft’s article on creative use of transparent graphics, as it’s an excellent introduction to this topic.

  • Jeff Croft wrote an excellent article on the topic of using PNG graphics creatively called Creative Use of PNG Transparency in Web Design. This is the article to get started with on this subject. It covers the file formats and issues and then discusses creative transparency effects for images. It gives advice for watermarking images with PNG’s, utilizing reversed transparent backgrounds, and other use of transparent PNG images.

    Jeff Croft

  • In some situations utilizing specific IE filters to display Alpha Transparency in IE6 is needed. The technique is limited, quirky, and can slow load times, but is still helpful in some situations. Review the article PNG Transparency for Internet Explorer (IE6 and Beyond) for an explanation of how to implement this solution.

    IE6 Beyond

  • Drew McLellan wrote an elegant script-based solution for dealing with the lack of PNG support in IE6. It was released as part of last year’s 24 Ways project and is called Transparent PNGs in Internet Explorer 6. You may also find script-based solutions available as plug-ins for your favorite CMS or in your Javasript library of choice.

    24 Ways IE6

2. Faux Transparency on the Web Link

Faux transparency involves using images that imitate transparency with visual transparency effects. Such images can be created using applications such as Adobe Photoshop. Notice that the images used in faux solutions have no transparency data encoded, but are rather solid images that are designed to look transparent.

After creating a transparent design, you then prepare the graphics and Save for Web. You export solid graphics and use those when you code up the Website. The result looks just as transparent to end users. It’s a common solution used to sidestep issues of poor browser support for encoded transparent PNG image files. It requires no browser hacks for IE6 and no additional Javascript.

Of course, these solutions are not elegant in all situations. Take the case of horizontal navigation within site headers. There is a quick and common solution; you create faux transparency for each list item of the horizontal navigation. You do this by placing the background images of the horizontal navigation items absolutely to match the header background pattern.

In the case below, both the height and width are constrained on the list elements. With this type of solution you lose the ability for the design to enclose text as it gets resized. The background elements are fixed in place. Invariably, you will make some usability sacrifices when using this type of solution. Click on the photo below to view the web-site.

Pil Fake

3. Transparent PNG Background Solutions Link

After reviewing Web transparency, you’ll find out that there are strong reasons to move to PNG graphics for layout designs. They have full Alpha Transparency ability and a wide spectrum of colors. They optimize better than GIF files. However, it’s important to notice that browser support has traditionally held back the use of transparent PNG graphics.

With IE7 having full PNG support, many designers have started adopting the use of PNG graphics into their workflow. To cater to the dwindling IE6 user market Javascript-based solutions can resolve poor PNG support in that browser, or Conditional Comments can be used to fix small case scenarios. Below is one web-site that is currently using PNG graphics for its column backgrounds and is using Conditional Comments to target support in IE6.

Transparent Background Solutions

4. Flexible Width Transparency Link

If you’d decide to place transparent images on an opposite end of the browser window, images could overlap when the window is resized. You could use the flexible width transparency technique to create an interesting effect. The Risington Podcast uses a similar effect in its footer.

The Risington Podcast

Another technique is explained in this article In the Lab: Doing strange things to CSS Backgrounds. The solution is to creatively use varying percentages for background image placement. The background appears to move when the browser window is resized. Or for a more polished example that uses a similar technique view this article How to recreate Silverback’s Parallax.


5. Pushing the Boundaries Link

Scripting technologies like Ajax and Javascript open up ways to creatively use transparency in Web design. Creating draggable elements is an excellent opportunity to use transparent graphics that will overlay the page design.

The example below,, has an interesting ability to drag the search around the browser window. While being not the most useful application of this technique, it is an interesting experiment, and a funny little feature for users to play with. It’s not implemented perfectly in IE6, see first image below. As you can see in the second images, it works great in IE7. Clearly, the designer decided to offer limited support to IE6.

Pushing Boundaries

When dealing with older browsers it’s important to have a strategy in place that is in line with the actual traffic those browsers receive. Depending on the numbers, older browser based solutions could be given limited support; Or, as in the case of really old browsers, no support at all. Make sure you have a plan first, though.

Conclusion Link

Consider switching over to PNG format images for designing web layouts. Find new creative ways to use transparent images in your designs. Experiment with different uses for this technology. Develop a strategy for dealing with IE6, but ultimately look toward the future.

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Sean Hodge is the creative mind behind AiBURN, a weblog about design, creativity, inspiration and graphics.

  1. 1

    Once again, a very informative article. Thanks Smashing Magazine :D

  2. 2

    Link in part one is broken for 49abcnews, should be /web_standards not /Web_…
    Love it!

  3. 3

    I’m working with full png bgs in my newest designs, they are beautiful

    Thanks for the post

  4. 4

    great article, today with more power featured Browsers coming up, transpareny is one thing which can be used very powerfully.

  5. 5

    I’m not too keen on relying on javascript to create transparency since so many people/companies (at least a majority of the ones I’ve worked with) have it disabled. There’s an alternative, use .htc behaviors instead. You can see it in action and get the details at

  6. 6

    Great article!

  7. 7

    Thanks for the feature, I did not pay too much attention to IE6 users, I admit I was kind of lazy, there are better solutions to my transparency problem. :)

  8. 8

    Some of these examples I have seen before on

    I don’t know about creativity, but another website that uses Transparency is

  9. 9

    Great article! — I made use of a lot of CSS opacity and transparent PNGs in my newest design: The end effect is the ability to swap out any BG color and change the look of the whole page.

  10. 10

    Wow! I absolutely love your posts. I visit your site everyday. Kudos :)

  11. 11

    Nice article Sean, some very useful references also. Cheers.

  12. 12

    I’ve been using this really useful script to enable PNG transparency in background and foreground images when viewed in IE6:

    So far this has worked a treat in my own designs, so I hope this will be helpful to others too :)

  13. 13

    First link is not working, this is the right one:

    Cool article BTW ;)

  14. 14

    I use BigstringIM to make my IM’s 100% transparent after a certain time period. Well to be honest the message self-destructs, but it doesn’t get any more transparent then that.

  15. 15

    Try searching for the file. Just add img {behavior:url(; } to a stylesheet included with conditional HTML so that IE5-6 see it. It’ll fix pngs with normal img tags, but it might muck up your layout if you try to use it to fix divs with PNG backgrounds.

    Some javascript at fixed the png background images on my divs without mucking up the layout so much, but it still affected it–my container won’t automatically expand in ie6 anymore :(

    I used transparent PNGs to create a cool effect on one of my client’s websites– =]

  16. 16

    You guys are right on the money… just today I was in a heated discussion regarding transparency issues w/ IE6 is it worth the effort, if it’s not a client site. Just serve up a PNG and be selective of the background color, minus the alpha channel, IE6 users will just see the background color, I don’t have a problem with that easy work around if it doesn’t obscure anything else in the layout.

    I’ll be studying your mondo list meanwhile, thanks heaps!!

  17. 17

    I’ve seen a beautifull example of transparent png dragging on a website in the header area

    They had something like “Close to clients” and you could actually drag the clients closer to the it guy but in a very creative way. Se masking was involved there.

  18. 18

    Heres a really cool example of a transparent .png header.

  19. 19

    Great article !
    I’m actually working on a javascript library dedicated to handle with PNG32 formats on IE.

    I hope to release the beta 5 this week :)

  20. 20

    @Lisa: Though pretty, Modeblog fakes the transparency. In Firefox, just right-click on the girl and choose “View background image” to see it.

  21. 21

    Hi! Nice examples!
    We’re using a lot transparency in our WordPress theme for the atomtigerblog. I find it very nice and it has some nifty features – I wish next time we’re on the list too ;)
    Take a look here if you want to take a peek:

  22. 22

    You can actually get around a lot of PNG transparency issues in IE6 by using alpha transparent 8-bit PNGs. The edges of the images aren’t quite as smooth as they are in other browsers, but it’s an acceptable trade-off when you consider the alternatives required to get 32-bit PNGs to work correctly and that these workarounds sometimes produce unwanted side effects in IE6.

  23. 23

    I like the use of transparent PNGs but one thing to keep in mind is the increased file size for PNG’s, so don’t go overboard.

  24. 24
  25. 25

    Another very good example of why IE6 is a bane on web designers’ existences.

  26. 26

    very informative… gr8 work…

  27. 27

    Well, i always using png image format. This information is very useful to me. And , …. I wish no more people using browser that did not support alpha-transparency :D

  28. 28

    Hi guys thanks for the article event though it is a very popular topic among all of us… :)
    I just wanted to know.. is there any way to use a repeating background pattern that works with any of these IEPNG Fixing methods? (ok.. that means I don’t want to use a large transparent png pattern as my background.) I would really appreciate if any of you can help me with this matter.
    thanks! m/

  29. 29

    Mithun P Sreedharan

    April 17, 2008 12:44 am

    Great Great article…

  30. 30

    We just launched a MMO community portal with rich use of png transparency and overlapping transparent layers. Link


↑ Back to top