How to Set Cascading Style Sheets (CSS) Background Properties

The Cascading Style Sheets (CSS) background property allows Web developers to set background colors and background images for elements in Web pages. According to O’Brien (2007), background elements include total element item width, height, border, and padding. For this article, examples will be presented using the BODY tag. CSS background properties include background-color, background-image, background-repeat, background-attachment, and background-position and using embedded styles (http://www.ehow.com/how_4701864_using-cascading-style-sheets-css.html). For this article, we will only discuss background color and image properties. For information on attachment and position properties refer to the resources provided.

Difficulty: Moderately Challenging

Instructions

Things You'll Need:

• Knowledge of HTML and basic understanding of CSS

1. 
    
   background color

   The code for setting background color to blue for the BODY tag is as follows.
   
   BODY {
   background-color: blue;
   }

2. 
    
   background image

   To set a background image, the following code is used:
   
   BODY {
   background-image: url(“css-bg.jpg”)
   }
   
   Notice that the default setting is that the image repeats. Note that a shorthand version background: url(“css-bg.jpg”) could be used.

3. 
    
   Horizontal repeat of background image

   To repeat the background image horizontally use the following code:
   
   BODY {
   background: url("css-bg.jpg") repeat-x
   
   }
   repeat-x is placed after the background declaration.

4. 
    
   Vertical repeat of background image

   To repeat the background image vertically use the following code:
   
   BODY {
   background: url("css-bg.jpg") repeat-x
   
   }
   repeat-y is placed after the background declaration.

Tips & Warnings

• Resources include O’Brien, P. O. (2007, May 21). Web design 101: Backgrounds. Retrieved January 11, 2009, from http://www.digital-web.com/articles/web_design_101_backgrounds/comments/ http://www.w3schools.com/css/pr_background.asp http://www.ehow.com/how_4701864_using-cascading-style-sheets-css.html

Resources

• Web Design 101
• W3 Schools
• Working with Embedded styles

[tasokjams]

on 6/25/2009 How do you create a css page where each html page has a specific height so that all my pages are looking the same in height and width?