CSS Source Code for Repeating (Tessellating) Background Patterns

Web designers often use repeating patterns rather than solid colors to fill the background area behind the main area of a webpage. Low-key tessellations add interest the page without distracting the visitor, and help otherwise an otherwise generic design look more distinctive. Making the image unit repeat vertically and horizontally is simple matter of adding a few lines of CSS to your external style sheet or page header.

Step 1: Create or download an image that will create a seamless background pattern when repeated across and down. You can use one the 60 free gray scale background images here. Upload it to your website's images directory.

Step 2: In your external CSS file, look for the section

body { }

near the top of the document. If there is no "body" section, create one along with the opening and closing braces { }.

Step 3: Within the braces, add this line of CSS:

background-image:url(path_to_your_image_directory/your_image.png);

and replace path_to_your_image_directory/your_image.png with the url of the image. You don't need to add any extra code to make the pattern repeat; your web browser does that by default when it parses the code and displays the results on screen.

Alternative Method: If you don't have an external style sheet, you can add this CSS in the head section of your HTML. Look for (or add) the opening and closing <style> </style> tags. Between the tags, add this line of CSS:

body {background-image:url(path_to_your_image_directory/your_image.png);}

Vertical Repetition Only: To make an image repeat only vertically, add this CSS code to the body{} section:

background-repeat:repeat-y;

which tells the browser to only repeat the pattern in the direction of the y-axis.

Horizontal Repetition Only: To make an image repeat only horizontally, add this CSS code to the body{} section:

background-repeat:repeat-x;

which tells the browser to only repeat the pattern in the direction of the x-axis.