W3C home > Mailing lists > Public > www-style@w3.org > November 1996

Re: Repeat-x and Repeat-y

From: Bert Bos <bert@w3.org>
Date: Mon, 18 Nov 1996 17:43:58 +0100
To: www-style@w3.org
Message-ID: <3290924E.171B@w3.org>
Mary Morris wrote:
> 
> Can someone give me an example of how repeat-x and/or
> repeat-y should work? I don't see any examples, and I'm
> not sure what the syntax would be in the long string.
> Can I specify both repeat-x and repeat-y or must I
> specify both.

You cannot specify both repeat-x and repeat-y. You have to choose one of
the keywords from the set repeat (default), repeat-x, repeat-y and
no-repeat.

Here is an example:

    BODY { background: blue url(wave.png) 0% 100% repeat-x fixed }

This creates a blue background with a wave along the bottom of the
window that stays there if you scroll the text.

Another one:

    BODY {background: white 90% 5% url(images/logo) no-repeat}

This puts a single copy of the logo near the upper right corner.

> 
> For example, what if I want to repeat an image twice down
> the left side of the screen and have it fixed (so that something
> on the background lines up with text)?

That is not possible in CSS1. You can either have a single copy of the
image, a single horizontal band, a single vertical band, or a fully
tiled background. Two copies of the image, or two bands is not currently
possible.

What you could do in the example you gave is to create a new image that
contains two copies of the original:

    BODY {background: url(2copies.png) fixed repeat-y}

When you say that the background should line up with the text, what
exactly do you mean? Note that when the background is declared `fixed',
it is fixed to the window, not to the text.


Bert
Received on Monday, 18 November 1996 11:44:04 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:53:46 GMT