How to Repeat an Image in CSS
The background-repeat property
The background-repeat property is how you repeat an image in CSS. It accepts the values repeat, repeat-x, repeat-y, no-repeat, and inherit. There must be a image defined by the background-image property for the repeat to work properly. The background-repeat property can be used to repeat the page background, or repeat the background within an element such as a text box or paragraph. The next few sections will show you what each property value will do. The image we will use comes from https://www.grsites.com/. This site carries many different background images that can be repeated effectively so that you can test out your code.
Repeat
Let’s start with this bit of CSS code:
body
{background-image: url(images/green029.jpg);
background-repeat: repeat;
}
The repeat value causes the background to repeat both horizontally and vertically, filling the entire page. The following screenshot shows you what it would look like:
As you can see, this creates a seamless background over which you can add other elements and text. Adding a plain block above the background image would make the text stand out. Blog theme designers use this trick often to create interesting looking blogs.
Repeat-x
But what if you only wanted the image to repeat horizontally? This bit of code shows you how:
body
{background-image: url(images/green029.jpg);
background-repeat: repeat-x;
}
Add some text in a contrasting color and an interesting font and you have a header for your web site.
Repeat-y
Repeat-y does the same thing as repeat-x, but vertically.
Here’s the code:
body
{background-image: url(images/green029.jpg);
background-repeat: repeat-y;
}
Doesn’t that make a nice left hand column for your web pages? Add some links in a contrasting color and you’re good to go.
No-repeat and inherit
The no-repeat value stops an image from repeating. If you have an image that does not lend itself to repeating, like a photo or drawing, place the no-repeat value in your code like:
body
{background-image: url(images/green029.jpg);
background-repeat: no-repeat;
}
The inherit value says that the settings should be inherited from the parent value. For example this css code:
.parent{
background-image: url(green029.jpg);
background-repeat: repeat-x;
}
.child {
background-image: inherit;
background-repeat: inherit;
}
combined with this HTML code:
Hello, world.
Would create a paragraph that inherited the background image and repeat values from the parent class. Of course, you would add more properties to the classes in an actual stylesheet.
Conclusion
So, that is how to repeat an image with CSS. As you can see, you can use the background-repeat property to create many different and interesting effects for your web with just two lines of CSS code. Try it out and see how you can use a repeating background to enhance your web site.
