More Web Design Tutorials

Adding Background Images

March 22, 2011

Background images, just as the name implies, are part of the BACKGROUND of a website, not part of the actual content. The most common place to add a background image to, is the entire canvas – aka the body tag.

The CSS to add an image to a body tag is simple:

body {
background: url(bgimage.jpg);
}

I’m just using a random image for demonstration purposes, and THIS this is what we get. And we can note the following:

1. It’s a very beautiful flower (grew in my house)
2. It repeats itself and covers the entire background – that is called ’tiling’ (think bathroom)
3. It pretty much makes it impossible to read the actual page content

There are also special background images that are designed to tile unnoticeable -for example this one:
which will create THIS.

CSS also gives us the tools to direct our background image how we want it. The default, as you can see, is that it repeats itself horizontally AND vertically to fill the entire background, regardless of size. Sometimes we might want the image appear only horizontally or vertically – and maybe not directly on the edge of the viewing area.

body {
background: url(bgimage.jpg) repeat-x bottom;
}

creates a background that is repeated vertically at the bottom of the content, and this background image repeated horizontally on the right is created by this CSS:

body {
background: url(bgimage.jpg) repeat-y right;
}

There are many more ways for us to control our background. In addition to the above, we could:

• Add a background color (background: url(image.jpg) #555555;)
• Display the image only one time (no-repeat)
• Position it more specifically (options are: top, bottom, left, right, center, x-15px, or y-20% (measurements and units are optional))
• Keep it from scrolling (background: url(image.jpg) fixed;)
• Any combination of any of the above

A wise combination of all these techniques might actually allow us to create a decorative background that does NOT interfere with the actual content. Like This. The following CSS created this page – and please note that I also added some padding to keep the content off the image, which makes things soooo much easier to read:

body {
	background: url(bgimage.jpg) no-repeat #f6f1b9 fixed top right;
	padding-right: 250px;
}

Background images can be added to pretty much any tag. They can be added to divisions, used to create fancy navigation menus, spruce up a list, decorate h tags,…. It’s so exciting!!!!