The EWJ Database > When I'm Bored Script Series > Tiling a Picture In One Direction

You are here. Tiling a Picture In One Direction

Tiling a Picture In One Direction

CSS 1 (Cascading Style Sheets) provides the background-repeat attribute for tiling a picture.  I noticed that when using this attribute to tile a picture in the <BODY> tag, the picture is not displayed at all.  This is a way around it.  For this, you will need a browser with full support of CSS 1.  For information on CSS 1, click here.

First, create your page.  I will show a really basic one here:

<HTML>
<HEAD>
<TITLE>Tiling a Picture In One Direction</TITLE>
</HEAD>
<BODY BACKGROUND="bg.jpg">
<P>Testing, 1, 2, 3...</P>
</BODY>
</HTML>

I will take this page and add the small bit of code that will make the background repeat in only one direction.  You can leave the BACKGROUND attribute, make the BACKGROUND refer to a picture that is specifically designed for standard tiling, or have no background at all.  The CSS background will always be shown on CSS 1-enabled browsers and the standard background will be shown on browsers without support for CSS.

<HTML>
<HEAD>
<TITLE>Tiling a Picture In One Direction</TITLE>
</HEAD>
<BODY BACKGROUND="tile.jpg" STYLE="background-image:url('no-tile.jpg');background-repeat:repeat-y">
<P>Testing, 1, 2, 3...</P>
</BODY>
</HTML>

The repeat-y attribute can be changed to any of the following:

repeat - This forces the image to tile both horizontally and vertically.
repeat-x - This forces the image to only tile horizontally.
repeat-y - This forces the image to only tile vertically.
no-repeat - This forces the image to show in the corner, or in a position specified.


That's it!  Now for some clarification:  By "position specified," I mean a position specified by the background-position attribute.  It is used as follows:

background-position: vertical horizontal

Text that goes in the place of "vertical" includes a certain pixel, a certain percentage, and the words "top," "center," and "bottom."  Text that goes in the place of "horizontal" includes a certain pixel, a certain percentage, and the words "left", "center", and "right."

All of what was mentioned can be put in any tag that covers a span of text, such as <A>, <B>, <P>, <DIV>, <SPAN>, etc.  I wouldn't try it in tags which do not require a closing tag, such as <IMG>.