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):
And here's what it looks like when it's repeated against a div that's 340 pixels wide by 240 pixels high.
| Source Code | Result |
|---|---|
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 Code | Result |
|---|---|
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 Code | Result |
|---|---|
Repeat image across the bottom:
| Source Code | Result |
|---|---|
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 Code | Result |
|---|---|
Repeat picture across the center:
| Source Code | Result |
|---|---|
Repeat image across the bottom:
| Source Code | Result |
|---|---|
No-Repeat Image
You can also specify that the image should not repeat at all. To do this, you simply use no-repeat:
| Source Code | Result |
|---|---|
Again, you can specify where the image should be located. Here are some examples.
No-repeat, top right:
| Source Code | Result |
|---|---|
No-repeat, bottom center:
| Source Code | Result |
|---|---|
No-repeat, center center:
| Source Code | Result |
|---|---|
No-repeat, 70% 20%. That is, 70 percent across the horizontal plane, and 20 percent down the vertical plane:
| Source Code | Result |
|---|---|
No-repeat, 60px 20px. (i.e. 60 pixels across the horizontal plane, 20 pixels down the vertical plane):
| Source Code | Result |
|---|---|
You can also find more repeating image codes at HTML background images.