CSS Backgrounds: Tiling

Posted on August 27, 2009 in CSS Tutorials

CSS allows us to do some great things with background images that really can make your layout look excellent. The simplest method of applying a background image is to use tiling.

In this quick guide, I’ll go through the basics of using CSS to tile background images.

Before I go into tiling I’ll demonstrate the way I use to define a background image and then explain it.

#mypage{
	background: #fff url(background.gif);}

This is the very simplest it gets. The ‘#fff’ tells the browser to make the background of the div white and the ‘url(image.jpg)’ tells it to put that image over the black. The image will be tiled vertically and horizontally. Using this CSS is exactly the same as using:

#mypage{
	background-color: #fff;
	background-image: url(background.gif);}

Now, maybe we don’t want the image to tile vertically and horizontally. We might have a webpage that has a gradient background that fades into a solid colour. CSS makes this simple to do.

In this example I want the background to fade from grey (#ccc) to white. First of all I save my image in photoshop. It’s simply a 1px wide gif image. To tile the image horizontally I would use the CSS:

#mypage{
	background: #fff url(background.gif) repeat-x;}

If you want to you could tile the image vertically by using:

#mypage{
	background: #fff url(background.gif) repeat-y;}

Again, this is shorthand for using the code:

#mypage{
	background-color: #000;
	background-image: url(image.jpg);
	background-repeat: repeat-x;}

Finally, you can tell the browser not to repeat the background image at all.

#mypage{
	background: #fff url(background.gif) no-repeat;}

Hopefully this quick article will have given you a quick demonstration on how to tile background images using CSS. I’ll hopefully be writing another quick guide on using fixed background images.