Not quite. All four background images are here. I think you've probably done the resize-and-scroll thing. Before I explain, you might want to go and have a look at the stylesheet here. I'll wait.
All my CSS is the non-indented stuff down the bottom. The rest was nicked from LJ so my external sheet could still render the basic layout properly.
The trick behind the backgrounds is in the CSS1 specification - the background-attachment: fixed property means that the image is fixed with respect to the viewport - that is, the space in your browser window where the page is rendered. All four of those images are stacked up on top of each other, but you can only see them within their elements, depending on which one happens to be on top. The body doesn't have a background, because 4 backgrounds is enough and I thought the solid indigo border looked prettier.
That's why it doesn't work on IE/Win or Opera, because they fix the background to the element - it works for the body, but not for anything else. The CSS trick that keeps IE/Win and Opera relies on a parse bug known as the Owen Hack - that's the head:first-child+body bit at the start. The 'first-child' pseudoclass means 'match this element if it's the first child of its parent'. The + means that the element to its right directly follows the one on its left. In any valid xHTML document, the body element always immediately follows the head element that's the first child of its parent.
If that's not very clear, then just say so and I'll explain more for you.
no subject
Date: 2005-06-06 07:33 pm (UTC)All my CSS is the non-indented stuff down the bottom. The rest was nicked from LJ so my external sheet could still render the basic layout properly.
The trick behind the backgrounds is in the CSS1 specification - the background-attachment: fixed property means that the image is fixed with respect to the viewport - that is, the space in your browser window where the page is rendered. All four of those images are stacked up on top of each other, but you can only see them within their elements, depending on which one happens to be on top. The body doesn't have a background, because 4 backgrounds is enough and I thought the solid indigo border looked prettier.
That's why it doesn't work on IE/Win or Opera, because they fix the background to the element - it works for the body, but not for anything else. The CSS trick that keeps IE/Win and Opera relies on a parse bug known as the Owen Hack - that's the head:first-child+body bit at the start. The 'first-child' pseudoclass means 'match this element if it's the first child of its parent'. The + means that the element to its right directly follows the one on its left. In any valid xHTML document, the body element always immediately follows the head element that's the first child of its parent.
If that's not very clear, then just say so and I'll explain more for you.