Backgrounds and CSS

< Previous - The CSS Box Model | Quick CSS Course (5 days) | Beginning CSS Articles | Next - CSS and Lists >

Changing the background color of nearly any block-level element is easy with CSS. You just use the background-color style property:

background-color: deepskyblue;

• background-color

But you can change more than just the color of your backgrounds. With CSS you can put an image behind elements on your page using the background-image style property:

background-image : url(bgimage.gif);

• background-image

But it's not enough to place background images on elements, you want to place it in a specific location behind the element. The background-position property does that for you:

background-position: 10px 20px;

• background-position

The standard way that backgrounds are placed on Web pages is to flow with the Web page itself. But you can set a background image and then fix it in one location while the foreground elements scroll above it. With the background-attachment property you can make a watermark on your Web page.

background-attachment: fixed;

• How to Create a Watermark
• background-attachment

If you put your background image on a space larger than the image itself, then the browser will tile them both horizontally and vertically. But with the background-repeat property, you can tell the browser to tile only horizontally, only vertically, or not tile at all and only display the background image once.

background-repeat: no-repeat;

• background-repeat

If you have to do a lot of different actions on your background, you can use the background shorthand property. This property collects all the background properties into one line to make your CSS cleaner and easier to read and use.

background: red url(image.gif) no-repeat fixed 0, 50%;

• background

< Previous - The CSS Box Model | Quick CSS Course (5 days) | Beginning CSS Articles | Next - CSS and Lists >