Backgrounds in CSS3

Hey all, 

In the websites that my company creates, we marketing callouts (or portlets as some of us call them) which are blocks of content that exist outside of the main content for things like interest rates, special promotions and the like. Pretty standard stuff. 

I try to be a markup purist. In so far as I can manage, I use the most semantically meaningful HTML I can manage. I don't like to throw in elements where they don't contribute to the meaning of the content. 

Today, my designer (but not for the first time) gave me a drawing where I am having troubles keeping out meaningless elements. In this case I'd need to add images that are just furniture. All they do is give the callout a drop shadow with some meaningless graphical elements at the top and bottom (it looks good mind you). Normally I'd just use a single background image and be done with it. Unfortunately, I fundamentally don't know the size of the content. 

For this reason I thought it would be useful if in CSS3 one could do the following:

.callout{
float:left;

background:
 blue url(/image/calloutbg.gif) repeat-y scroll 0% 0%, 
 blue url(/image/callouttop.gif) no-repeat scroll 0% 0%, 
 blue url(/image/calloutbottom.gif norepeat scroll 0% 100%;
}

The idea is that three background descriptions would be applied in order with the later descriptions overlaping the one below. 

There are a few implecations to this namely that the background-size should also apply to the background color. This way, one could do something like:

background:
 blue 0% 0% \50% 50%, 
 red 50% 0% \50% 50%, 
 green 50% 50% \50% 50%, 
 yellow 0% 50% \50% 50%;

if they so wished. 

One question that should be answered is what would you have if someone did the following:

background:
  blue 0% 0% \100% 100%,
  transparent 0% 0% \25% 25%;

Depending on your point of view the top left corner would either be transparent OR blue. 

Possibly another property would set that (background-overlap:cut-out|layer), although its only an issue if at some point one were to add a background-opacity or -transparency (which are apparently not opposites, if you're a pre-press guy; or so I've been told). 

Where this would be useful would be if you wanted to create a button with rounded corners against an arbitrary background. You would only have to make sure that your rounded corner graphics were the same color as the rest of your button. 

Adam


__________________________________________________
D O T E A S Y - "Join the web hosting revolution!"
             http://www.doteasy.com

Received on Thursday, 22 August 2002 17:57:57 UTC