///Create Cascading Style Sheet – CSS backgrounds

Create Cascading Style Sheet – CSS backgrounds

CSS Backgrounds

With a few simple attributes, CSS can be used to control the background of most any item on a web page. The background of heavily used tags for page structure, including div, p, and td can be controlled by applying a style with the following background attributes.

Attributes (The Long and Easily Explanable Way)


This attribute defines a solid color in the background of an object. Word values for colors and hexadecimal values can be used for colors. If no background color is set, the color of the item immediately behind the object will show through. The background-color attribute can also skillfully be used in conjuction with background-image. Before the background image loads, and in areas of the object in which is not displaying, a color defined with background-color will show. Here is an example for defining a maroon background color:

background-color: maroon;


This attribute defines an image to appear in the background of an object. The location and behavior of the image may be further contolled by the following tags, but by default, the image starts in the top left and tiles throughout the object. The image location is defined with url() like so:

background-image: url(myimagefolder/bg.gif);


This attribute focuses a background image in a particular location. The values include top, center, bottom, left, and right. Thus, the background-position attribute can be used to line up a tiling image with any side of an object (you can also make the image just appear once if tiling is turned off by using the no-repeat value – explained below). One little annoyance the all-powerful at the W3C don’t seem to care about is the fact that only one direction can be defined for position. So, if you set it to bottom, the background image is aligned to the bottom center. If you choose right, it is aligned to the middle of the right side. There’s no way to align to the bottom right corner, because CSS just doesn’t work like that; only the last given value for any attribute is rendered by the browser. So, that just means that in order to position a background image in a corner, you’ll have to get creative with it’s construction (i.e. offset it with transparent pixels) or just use more positioning tags like divs to work around it. Getting back on track, here’s and example:

background-position: bottom;


This attribute controls the way a background image repeats (tiles). As said already, by default, a background image will start in the top left corner and repeat in both the x and y directions throughout the object. By using background-repeat, you can make the background image repeat in only the x direction, y direction, or not repeat at all. The three values for it are repeat-x, repeat-y, and no-repeat. An example looks like:

background-repeat: repeat-x;

Shortcut Syntax

The shortcut syntax for backgrounds is quite beautiful. It works so well, in fact, that there is really no need to use any of the long-hand attribute above, accept for in rare situations where you want to change one aspect of a previously defined background. The shortcut method works by using the attribute background and using values for the four background attributes in the same order they appear above (some of the four attributes can be left out if you wish to use the default setting). Here is an example that has a yellow background color and a background image that is aligned to the bottom and does not repeat:

background: yellow url(image.gif) bottom no-repeat;

Simple? You betcha. Good luck sprucing up those backgrounds.

2010-05-26T11:41:46+00:00 March 29th, 2005|CSS|0 Comments

About the Author:

Darren Hedlund is a freelance Web developer, writer, and data analyst. Darren has a degree in Computer Information Science and has spent the last 15 years developing application and environments from hand held, windows, web, virtual science, gaming, artificial intelligence and graphics design.

Darren's coding knowledge ranges from C+, Visual Basic, .NET, PHP, JSP, REXX, KIXX, and many others. His graphical and environmental knowledge stems in Macromedia Flash, 3D studio Max, Curious Labs Poser, Adobe Photoshop, and many others. Darren works in many platforms ranging from database, visual design, and, system development.

Leave A Comment