Pin Me

Using CSS to Repeat an Image

written by: Kristen Grubb•edited by: Simon Hill•updated: 2/24/2010

Using an image as a background makes for a more interesting page than a simple color. It is possible to use a small image file to fill an entire page or a portion of the page by repeating the image. So, how do you use CSS to repeat an image? Let's take a look...

  • 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

    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:

    Full repeat 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

    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;

    }

    Repeat-x Add some text in a contrasting color and an interesting font and you have a header for your web site.

  • slide 4 of 6

    Repeat-y

    Repeat-y does the same thing as repeat-x, but vertically.

    y-repeat 

    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.

  • 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:

    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:

    <div class="parent>

    <p class="child>

    Hello, world.

    </p>

    </div>

    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

    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.