Proposal: Allow Multiple Background Images for a Single Element

With the "background-position" style property, we can position a *limit of
one* background-image so that it "docks" against 

any "side or corner" of a block element.

 

I propose the ability to "add and position" *multiple* background images for
a "single element". With this specification, a 

designer would be able to "round the corners" of any element without having
to make style rules for any other element!

 

For example, if I have 4 images:

 

top-left-curve.jpg

top-right-curve.jpg

bottom-right-curve.jpg

bottom-left-curve.jpg

 

and I have one element:

 

<p class="RoundOffCorners">Wouldn't it be nice and elegant if you could make
a "CSS style rule class" that would round the 

corners off of any markup element that was a member of that class?</p>

 

We'd be able to create one CSS style rule to make the element have rounded
corners:

 

.RoundOffCorners

{

            background-image-top-left: url("top-left-curve.jpg") 4;

            background-image-top-right: url("top-right-curve.jpg") 2;

            background-image-bottom-left: url("bottom-left-curve.jpg") 3;

            background-image-bottom-right: url("bottom-right-curve.jpg") 1;

}

 

The numbers at the end represent "Background-image z-index values". This is
needed to determine which backgrounds will be on 

top if the element's size is so small that the "docked multiple background
images" overlap.

 

So essentially, I'm proposing that we add following properties to the CSS
specification:

 

background-image-top

background-image-left

background-image-right

background-image-bottom

background-image-top-left

background-image-top-right

background-image-top-left

background-image-top-right

background-image-bottom-left

background-image-bottom-right

background-image-center

 

If you don't like the idea of adding "this many property names", perhaps we
can figure out a way to add just one property 

that's property value can contains an collection of images and their
respective "docking/z-index" settings:

 

.RoundOffCorners

{

            background-images: url("top-left-curve.jpg") 4 top-left,
url("top-right-curve.jpg") 2 top-right,             

url("bottom-left-curve.jpg") 3 bottom-left, url("bottom-right-curve.jpg") 1
bottom-right;

}

 

So what do you think? Isn't having only one background image an
oversimplification? When the structure of something is 

oversimplified at its base, it leads to complication in higher layers.
That's why there are so many tacky ways people round 

corners (i.e. adding empty block elements to markUp and styling them OR
using outside elements to round corner of the 

current element OR Layering ).

 

Respectfully,

 

Lonnie Lee Best