Re: background-clip and background-origin question

On Wed, Jan 19, 2011 at 12:20 PM,  <tao.yu@nokia.com> wrote:
> What is the relationship between background-clip (define background painting
> area) and background-origin (define background positioning area)? How do
> they impact each other?

They don't affect each other at all.

The background positioning area is the rectangle used to map
'background-position' values to positions on the screen.  Normally,
"background-position:0 0" will put the image in the top-left corner of
the padding box of the element, but if you set
"background-origin:border-box", then the same background-position
value instead refers to the top-left of the border box of the element.

The background painting area is just the rectangle that we clip the
background layer to when we actually paint it.  Conceptually, a
background layer is infinite; if you specify "background-repeat:
repeat;", those repetitions go on forever in all directions.  When
painting the background, though, we clip that infinite plane to a
rectangle that is, by default, the size of the border box of the
element.


> I have a case like below:
>
>               border:7px dashed #354658;
>               padding: 20px;
>               background-image: url("support/green_box.PNG");
>               background-repeat: repeat-x;
>               background-position: center;
>               background-color: silver;
>               width:60px;
>               height:60px;
>               background-clip: border-box;
>               background-origin: padding-box;
>
> I assume both background-color (silver) & background-image
> ('support/green_box.PNG') will appear only in the padding-box area
> (background-origin: padding-box) and dashed border space should be
> blank/white. IE8 behaves this way, but some other browsers
> (Chrome/Safari/Opera v11) still paint both background-color and
> background-image behind the dashed border. Which browser's behavior is the
> right one? Looks like IE8 does properly but I am not sure.

Your background painting area (defined by background-clip) is the
border box, so when we draw the background layer we clip it to a
rectangle the size of the border box.  This means that the
background-color and the background-image's repetitions should show
underneath the border, between the dashes.

~TJ

Received on Wednesday, 19 January 2011 22:42:43 UTC