A way around iframes

Ok I just did a quick test on that site. There are differences in at least IE6 and FF2/3, all 4 corners.

Maybe your layout had something different.

Mine was a bottom right bg, roughly 50px by 50px. I'll do some testing myself and post the results.

Version 1

The only "problem" with this is that IE scrolls the background (like it should given the default value is scroll) whereas the other browsers set a fixed background. You can set background-attachment to fixed and it works fine in IE6, however IE7 won't display the image at all. Funnily enough, despite Opera showing it fixed by default, if you set background-attachment to fixed the image doesn't display...

If you really care about every browser being the exact same (because you know how many people will be comparing your site in different browsers to picking on tiny differences ) then I present to you version 2:

Version 2

The difference simple being the background is placed on a div which wraps all the content, rather than the scrollable div itself. It should make no difference considering the only difference between the divs is one is overflow:auto, however theory is wonderfully wrong, as per usual. Tested in IE6, IE7, FF3 + Opera 9.

The #1 rule in web development - there is always a workaround

Ok so we agree that the article isn't rubbish right?

Now with that's out of the way, a few things I want to outline: 1) The default value of background-attachment is "scroll" (it's never "fixed", in IE or FF or Opera)... that said your initial guesses weren't really correct. 2) background-attachment specifies whether the image is fixed or scroll with regard only to the viewport ( http://www.w3.org/TR/CSS21/visuren.html#viewport ).

So to this question:

Originally Posted by rochow Funnily enough, despite Opera showing it fixed by default, if you set background-attachment to fixed the image doesn't display...

The image does display but its position is at the top left corner of the viewport, outside of the #page container. Just resize your browser window of the "version 1" you'll see the AU map image.

Originally Posted by rochow If you really care about every browser being the exact same (because you know how many people will be comparing your site in different browsers to picking on tiny differences )

Originally Posted by rochow The #1 rule in web development - there is always a workaround

Sort of agree with these

Btw nice portfolio you got there.

I said the not being able to put a background on it is rubbish. As far as the article as a whole, it's pretty basic and obvious stuff.

I said that the default value is scroll. IE is actually the only browser that gets this right. The rest show the background fixed (no matter how much you scroll, the bg is still in position).

I don't know how you can not agree that there is always at least a workaround to problems (workaround doesn't equal perfect solution)

Originally Posted by rochow I don't know how you can not agree that there is always at least a workaround to problems (workaround doesn't equal perfect solution)

Well if you say so then that depends on the problem and how you define a solution as a "good enough" workaround.

For the "fixed" in FF, Opera... I think you might need to reread the 1) and 2) I posted. IE is doing it wrong. And in FF, Opera it's still "scroll" not "fixed".

If you still have no idea what those means, just do what I said and resize the browser window.

Edit: double posted.

Well if you say so then that depends on the problem and how you define a solution as a "good enough" workaround.

He said it can't be done. Version 2 does it. That's a good enough workaround, only 1 unsemantic div.

Yeah that's a pretty clever solution.

About the "fixed" in Opera, to be sure I'll explain it again:

1) The viewport != 400x300 DIV with overflow:auto;

2) Fixed and scroll are in regard with the viewport.

3) Firefox/Opera/the rest are doing it right with scroll. IE is wrong.

4) Resize the windrow until you can scroll the browser scrollbars. When you scroll, the image will scroll along with the box/content/everything inside. Version 1.

Originally Posted by rochow IE is actually the only browser that gets this right. The rest show the background fixed (no matter how much you scroll, the bg is still in position).

I thought background-attachment did it on that particular element, not something that was reserved exclusively for the body. Never have been much of a theory person, I just get in and do it