Let's play with the template

I've been fiddling a bit with the template. I don't know if it'll work for all you Internet Explorers out there, but if you are one of those people, do yourself a favor and get Firefox instead. I've taken advantage of a few CSS tricks that I particularly like and IE just doesn't always know what to do with them. (Never mind that the 'tricks' are literally standard CSS that's existed for, what, a decade or so?)

What you should be seeing is a nice picture of a spiny lobster coming down from the top left, and when it goes behind the boxes with text in them, it gets light and blurry so you can read the text. What's actually happening is there are two images:


There's no post-processing magic going on here, just a bit of trickery. The sharp one is the background of the main body of the page. The text boxes are what are called 'divs', or divisions of the page, and you can basically treat them as seperate subpages within the body. So what I did was set the blurry lobster as their backgrounds -- but fixed on the top left corner, in the same place as the body's background, and set to not scroll when the screen does. What makes it work is that they're only visible within the divs.

I didn't come up with this idea. (I'm not really that good with CSS yet.) I learned how to do it from css/edge, which has some really cool things you can do. Also worth checking out are the CSS Zen Garden, and glish.com. Not to mention the W3C CSS info page.