Re: background-position and other sundry css clarifications

David Perrell wrote:
> 
> Douglas Rand wrote:
> !> I'm a little unclear on this property.  Can this be used with repeat,
> !> repeat-x and repeat-y,  or does it imply a single copy of the image
> with
> !> no-repeat only?  If you *can* repeat,  does the image origin begin
> the
> !> repeat area,  or does it extend backward to the edge of the content.
> 
> If the repeat extends in both directions a repeated background could be
> centered regardless of window size, and another centered element could
> be aligned with - or predictably offset from - the background. IE3.2
> only repeats in the positive x and y directions, but the spec (5.3.4)
> seems to imply that the image _should_ be repeated in both directions:
> "The 'repeat-x' ('repeat-y') value makes the image repeat horizontally
> (vertically), to create a single band of images from one side to the
> other."

Correct. If a background image is repeated, backgroun-position gives
the position of *one* of the copies, but there will be other copies
above, below, to the right and to the left.

Repeat-x indeed means: repeat both to the left and to the right.

> 
> !> A small clarification on background/background-color would also be
> !> desirable.  Right now I'm drawing those out to the edge of the
> padding,
> !> but it occured to me that the background-position was w.r.t. the
> !> content.  Is the background clipped to the padding or the content?
> 
> Isn't "The padding area uses the same background as the element itself
> (set with the background properties (5.3.2-5.3.7)" pretty clear?
> (Section 4, formatting model.)

Correct. The background-position is relative to the edge of the content,
but the background image/color is drawn in the padding as well. Note
that background-position can be negative, so you can align images with
the padding if you wish.

> 
> !> A last clarification.  Each element can be addressed with a CSS
> !> property.  Is there an implicit element for the text within a block,
> or
> !> is it simply assumed that you can never set non-inherited properties
> for
> !> that text without using SPAN?

That assumption is correct.

There are one or two situations where you would indeed need an extra
SPAN inside the block:

  - Set a background color behind the text, but have it appear *only*
    behind the text, not filled out to the edges of the block:

        text text text text text text #####
        more text text not justified text #
        text text text ####################

    The area marked with # will be filled with color if you set
    background on a block element, but not if you set it on an inline
    element. If you want this effect for a paragraph, you need to write

        <p><span>text... </span></p>

    and set the background on the span instead of the p.

  - Set a border around an element, and have it appear around every line
    of the text, instead of around the paragraph as a whole.




Bert

Received on Wednesday, 14 May 1997 13:45:09 UTC