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.
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.
You can repeat your image horizontally by using
You can tile your image vertically by using
You can prevent your background image from repeating by using
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.
Positioning your Repeating Background Image
You can define where your repeating background image is positioned.
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 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).