- slide 1 of 6
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 http://www.grsites.com/. This site carries many different background images that can be repeated effectively so that you can test out your code.
- slide 2 of 6
Let's start with this bit of CSS code:
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.
- slide 3 of 6
But what if you only wanted the image to repeat horizontally? This bit of code shows you how:
Add some text in a contrasting color and an interesting font and you have a header for your web site.
- slide 4 of 6
- slide 5 of 6
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:
The inherit value says that the settings should be inherited from the parent value. For example this css code:
combined with this HTML code:
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.
- slide 6 of 6
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.