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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult

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 CodeResult
Repeating Background Image Repeating Background Image Repeating Background Image
Repeating Background Image Repeating Background Image Repeating Background Image
Repeating Background Image Repeating Background Image Repeating Background Image

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.

Loading