Re: CSS3 draft: multiple backgrounds concerns

I looked into border images when I was experimenting but decided it  
wouldn't work for what I wanted.

I thought I would give it a try so I downloaded the latest nightly  
and tried it. It works pretty well except that I want the contents of  
the box to be on top of the border. Since negative padding isn't an  
option, I can't think of a way to get it to look like what I want  
without adding another property, which would most likely break the  
box model.

Any thoughts?

-Charlie Hayes

On Feb 16, 2006, at 2:49 PM, David Hyatt wrote:

>
> 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 22:11:20 UTC