Repeat Image

This page contains "repeat image" code. That is, code that will display an image that is repeated vertically and/or horizontally across the screen. Feel free to copy and paste this HTML/CSS code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Repeating an image is quite a trivial thing in HTML. Actually, you use CSS code to repeat the image. The way you do this is by using a background image, and specifying how it should repeat (or tile).

You can repeat a background image against any HTML element - whether its the whole page (using the body tag) or simply a section of a page (for example, using a div tag).

Repeat Image Code

By default, a background image repeats horizontally and vertically across the whole HTML element. The following example demonstrates this. This example code applies a background picture to an HTML div tag using the background-image property. Also, to show the border of the div, we place a gray border around it.

The image we use looks like this (without the black border):

Sample background image

And here's what it looks like when it's repeated against a div that's 340 pixels wide by 240 pixels high.

Source CodeResult

Repeat Image Horizontally

Here, we use CSS code that repeats the image horizontally only. The effective code is repeat-x, which tells the browser to repeat along the "x" axis (or horizontal axis).

Note also, that we use the background shorthand property in this example. This can be used in place of the background-image property, and allows you to specify many properties within one property.

The alternative way of doing this would have been to use background-repeat:repeat-x in addition to the background-image property.

Source CodeResult

In the above example, the image is repeated across the top of the div. We could also repeat the background image across the middle or bottom of the div. Like the following examples.

Repeat image across the center:

Source CodeResult

Repeat image across the bottom:

Source CodeResult

Repeat Image Vertically

To repeat the background image vetically, we use repeat-y. Below are examples.

In the first example, we don't specify which side the image should start at. Therefore, it uses the default (left).

Source CodeResult

Repeat picture across the center:

Source CodeResult

Repeat image across the bottom:

Source CodeResult

No-Repeat Image

You can also specify that the image should not repeat at all. To do this, you simply use no-repeat:

Source CodeResult

Again, you can specify where the image should be located. Here are some examples.

No-repeat, top right:

Source CodeResult

No-repeat, bottom center:

Source CodeResult

No-repeat, center center:

Source CodeResult

No-repeat, 70% 20%. That is, 70 percent across the horizontal plane, and 20 percent down the vertical plane:

Source CodeResult

No-repeat, 60px 20px. (i.e. 60 pixels across the horizontal plane, 20 pixels down the vertical plane):

Source CodeResult

You can also find more repeating image codes at HTML background images.