The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

IE6 PNG Hack with No scrolling

  • # September 22, 2008 at 7:59 pm

    Hello CSS gurus,

    I am currently paying a web developer to do some minor fixes for our blog. One of those fixes involves the IE6 PNG fix. I would also like the PNG images to not scroll when the page moves. He tells me that setting the background to a fixed position can not be applied because the file will be overridden. If this is true, does anyone know of a way to have PNG files work with IE 6 and can also be set as a fixed position. A website or code demonstration would be much appreciated.


    # September 23, 2008 at 1:13 pm

    Hi Ryan,

    As far as I know it’s not possible to have a fixed background when using any png fix (be it unitPNG or supersleight – or any others). Are you using transparent PNGs? Otherwise, if it’s not a transparency issue, could you use a gif/jpg images instead?

    # September 23, 2008 at 3:00 pm

    This reply has been reported for inappropriate content.

    does anyone know of a way to have PNG files work with IE 6 and can also be set as a fixed position

    Use IE7.js. IE6 doesn’t support PNG transparency or fixed positioning. IE7.js will fix both automatically. All you need to do is link to it in the document’s <head> section. Then, rename your transparent image to "whatever-trans.png" (the fix only works on images that end in -trans), and then assign it "position: fixed" in the CSS and place it wherever you want. I just tried it on a very quick sample page that I just slapped together, and it works.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed