Why can’t I put multiple background images on a single div?
div#myNiftyDiv
{
background: url(/images/topleft.gif) no-repeat top left;
background: url(/images/topright.gif) no-repeat top right;
background: url(/images/bottomleft.gif) no-repeat bottom left;
background: url(/images/bottomright.gif) no-repeat bottom right;
}
The above should give me a nice rounded corner for a colored box, and degrade nicely for agents that don’t support it. I could do more with a z-index property:
div#myNiftierDiv
{
background: url(/images/topgradient.gif) repeat-x top left z-index(1);
background: url(/images/repeatingpattern.gif) repeat-y z-index(0);
}
That would give me a nice gradient on top, possibly an alpha-blended png, and a repeating pattern down the body.
You can do these things currently in CSS, but you either have to place non-informational images in the div or use lots of non-semantic divs, or hard-code the width and height and sometimes position of the div while serving up a huge image, a la CSSZenGarden.
So really, who in 1999 when CSS 2 was on its way didn’t just look at the way tables were being used and think to themselves, “Hey, let’s make sure we can do all of this with our nifty new structure”? It’s not like I started encountering curved designs two years ago.