WebKit diplay bug when switching position from absolute to fixed
Found an interesting WebKit bug that affects both Safari and Google Chrome. Changing an element from absolute positioning with bottom set to a value to fixed (with a bottom value) causes it's positioning to be relative to the top of the window frame. That is if an element has a position of absolute and a bottom of -50px and is switched to postion fixed, all but the bottom 50px will appear at the top of the page, instead of the bottom where it should be. For the switch to work properly, there must be a point in time where no position is set between the two states.
I've created a test page to illustrate this bug.
CSS Resizable "Background" Image Technique
Resize this page. The background will remain the same width as the window. The technique uses an actual image tag and its own fixed position div wrapper to pull off the effect. This will probably make semantic-web nazis' heads explode, but at least it doesn't use tables. The image will remain at the top of the page however, so having the image end in a single color at the bottom, matched by a similar color for the body background would probably finish this off quite nicely. If you need the image to center, use the tables technique linked above. Here's the basic CSS to pull this off in IE7, IE8, Firefox, Safari, Opera and Chrome:
And this is all the HTML you need to add to the top of the page (above any "wrapper" div you may be using):
<img id="bgimg" src="[URL_TO_YOUR_IMAGE]"
alt="background image" width="0" />
To find out how to make this work in IE6, look at the source code of The Demo page