Re: CSS3 draft: multiple backgrounds concerns

border-image sounds like it might be more applicable for what you  
need.  Also border-image can be clipped by border-radius, so you can  
even let border-radius do the rounding.   (This combination works in  
Safari nightly builds, if you want to experiment with that as well.)

dave

On Feb 15, 2006, at 4:15 PM, Charlie Hayes wrote:

> I have done some experimenting with multiple backgrounds using  
> Safari and have read the CSS 3 draft specifications 3 or so times  
> with regards to borders and backgrounds, and I think there needs to  
> be some improvement on the positioning of repeated backgrounds.
>
> I think one of the most common uses of the new multiple backgrounds  
> is going to be rounded-rectangles or similar fancy rectangles, that  
> being different images for the corners and repeated segments on the  
> edges.
>
> From my experimentation, I was able to reproduce a rounded  
> rectangle using a single style, however the background of the  
> corners needed to be opaque so that the repeating edges did not  
> show through.
>
> Unless I have a misunderstanding of the standards or didn’t read  
> them clearly enough or there is a problem in the rendering from  
> Safari, I believe there should be an method for specifying where a  
> ‘repeat-x’ background should begin relative to the left of the box  
> and end relative to the right of the box. There should also be  
> similar method for ‘repeat-y’ and ‘repeat repeat’ backgrounds.
>
> A possible solution may be changing the background-repeat property  
> values to include boundaries, a possible example may be:
>
> ..someStyle{
>             background-image: url(someBackground.png);
>             background-repeat: repeat-x 10px 15px;
> }
>
> -Charlie Hayes

Received on Thursday, 16 February 2006 19:50:18 UTC