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
> !> no-repeat only? If you *can* repeat, does the image origin begin
> !> 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
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
> !> 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,
> !> is it simply assumed that you can never set non-inherited properties
> !> 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
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.