CSS Repeating Backgrounds

Tutorial Category:

Share This:

Are you looking for a repeating background using CSS? This tutorial will teach you how to create 3 different css repeating backgrounds: horizontal, vertical and tiled.

STEP ONE

Let’s start with a horizontal repeating background. This would be a background image that repeats itself left to right. For example, let’s say we want to create the following horizontal bars at the top of a webpage:

In Photoshop, create a new file with a width of 1 pixel and a height of 150 pixels. (The height will depend on how far down you want the horizontal bars to go so that’s really up to you and your project.) Why just 1 pixel for the width? Well, that’s the beauty of using a repeating image! Because we’re using simple colored horizontal bars with no patterns, we only need a 1 pixel slice because the rest will fill itself in using CSS.

Since this will be a repeating background image on the body of the webpage, we need to add CSS to the body tag as follows:

1
2
3
4
5
6

body {
margin: 0px;
padding: 0px;
background-image: url(images/page-background.gif);
background-repeat: repeat-x;
}

Of course, make sure you define the correct path and name for your background image. You have yourself a horizontal repeating background using CSS!

STEP TWO

Let’s move onto a vertical repeating background. This would be a background image that repeats itself top to bottom. For example, let’s say we want to create the following vertical bars as the background for our webpage:

In Photoshop, create a new file with a width of 2000 pixels and a height of 1 pixel. (The width will depend on how big of a resolution you’re taking into account.) Why just 1 pixel for the height? Well, that’s the beauty of using a repeating image! Because we’re using simple colored horizontal bars with no patterns, we only need a 1 pixel slice because the rest will fill itself in using CSS.

1
2
3
4
5
6
7

body {
margin: 0px;
padding: 0px;
background-image: url(images/page-background.gif);
background-repeat: repeat-y;
background-position: center;
}

Of course, make sure you define the correct path and name for your background image. You have yourself a vertical repeating background using CSS!

STEP THREE

Let’s finish with a tiled repeating background. This would be a background image that repeats itself left to right and top to bottom. For example, let’s say we want to create the following tiled background as the background for our webpage:

The type of pattern you use is up to you, but you want to make sure you’re using a seamless pattern. A seamless pattern does not show its edges when it repeats itself across and down. It should blend nicely. You can check out my tutorial on a flower pattern background if you’d like. Once you have your seamless pattern, define the following CSS:

1
2
3
4
5
6

body {
margin: 0px;
padding: 0px;
background-image: url(images/page-background.gif);
background-repeat: repeat;
}

Of course, make sure you define the correct path and name for your background image. You have yourself a tiled repeating background using CSS!

Share This:

Related Tutorials