CSS Repeating Backgrounds

March 30, 2011 | Category: Tutorials | Tags: | Leave A Comment

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.

WPMU DEV - The WordPress Experts

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!

Did you like this?
Subscribe to our Jacorre Design Studio RSS Feed RSS Feed, join us on Jacorre Design Studio on Facebook Facebook, follow us on Jacorre Design Studio on Twitter Twitter or simply recommend us to friends!

You might also be interested in:

CSS Background Rollover
Looking to add a little style to your image links?...
Absolutely Positioned Ads
The best areas to place advertising can vary from ...
CSS Navigation Menus
Are you looking to create navigation menus using C...

 

Add a comment