W3C home > Mailing lists > Public > www-style@w3.org > February 2006

Re: CSS3 draft: multiple backgrounds concerns

From: Charlie Hayes <cosmotic@cybercoment.com>
Date: Thu, 16 Feb 2006 17:10:46 -0500
Message-Id: <9A96B0B7-B789-4ED1-B42A-2B8303C0E15E@cybercoment.com>
Cc: www-style@w3.org
To: David Hyatt <hyatt@apple.com>

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

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:27:23 UTC