Repeat Image
This page provides "repeat image" codes - HTML code for making your background image repeat (or "tile").
You can make your background image repeat across the page (or any other HTML element) by using the CSS background-repeat property. You can also use the background property to set all your background related properties at once.
You can make your background image repeat horizontally, vertically, or both. Below are some examples (and code) of repeating background images.
Default Repeat
When you add a background image, the image repeats by default. In other words, you don't need to add any "repeat image" code to make your background tile across the element. It automatically does it.
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
Repeat Horizontally
You can repeat your image horizontally by using background-repeat:repeat-x.
Example:
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
Repeat Vertically
You can tile your image vertically by using background-repeat:repeat-y.
Example:
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
No Repeat
You can prevent your background image from repeating by using background-repeat:no-repeat.
Example:
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
Using the background Property
It's usually more efficient to use the background property to define your background images. This property is shorthand for writing all your background related properties. In this example, we acheive the same effect as the above example, but with less code.
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
Positioning your Repeating Background Image
You can define where your repeating background image is positioned.
Example:
| Source Code | Result |
|---|---|
|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |
Repeating Embedded Images
This is not a common thing but just in case you want to do it, I've added an example below.
Technically, you can tile/repeat embedded images. Embedded images are the ones that are defined using the HTML img tag (as opposed to the CSS background-image or background properties). In other words, these are not background images - they're foreground images.
Anyway, you could tile your embedded images simply by placing them next to each other - or underneath each other.
I wouldn't normally recommend this technique but it's here in case you want it. The main problem with doing this is that you can't place text in front of your image (well, technically you can but it becomes a whole lot harder).
Example:
| Source Code | Result |
|---|---|
This text is displayed in front of the repeating image. That's because it's a background image, as opposed to a normal image that has been defined using normal image code. |