W3C home > Mailing lists > Public > www-style@w3.org > August 2010

Re: Interaction between border-image and background gradients

From: David Chambers <david.chambers.05@gmail.com>
Date: Thu, 19 Aug 2010 15:55:24 +1200
Message-ID: <AANLkTimgWJt-5dkCpCj0Gw+4T=bM=5_JCeHA=GbNij6X@mail.gmail.com>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: www-style@w3.org
To answer my own question: `background-origin: border-box` does exactly
this.


On 19 August 2010 15:48, David Chambers <david.chambers.05@gmail.com> wrote:

> Thanks, Tab and Simon!
>
> I now see that the background _is_ repeating in both directions. I added
> `no-repeat` to the `background` rule as you suggested, Simon, which prevents
> the gradient from filling the border region. :)
>
> I have one more question: Is it possible to have the background gradient
> begin at the border's outer edge rather than the border's inner edge?
>
> David
>
>
> On 19 August 2010 15:08, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
>
>> On Wed, Aug 18, 2010 at 9:13 AM, David Chambers
>> <david.chambers.05@gmail.com> wrote:
>> > Is this correct behaviour? Why does the gradient extend to the border
>> edge in one direction only? Why the opposing stripes in the other direction?
>>
>> It's correct behavior.  Unless you specify otherwise, the default
>> behavior of backgrounds is to repeat.  That's what's happening here -
>> the gradient is repeating in both directions.  It looks like a pretty
>> solid color, though, if you only grab 20px from each side.  Make the
>> border-width 200px and all will be revealed.
>>
>> ~TJ
>>
>
>
Received on Thursday, 19 August 2010 03:56:00 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:30 GMT