Try the Complete HTML5 and CSS3 Course Free!

CSS 3 and HTML5 Training: Creating Backgrounds in CSS

/ / HTML, Latest

In this post, we will discuss creating backgrounds in CSS using color, images, and fixed images.  Need more CSS3 and HTML5 training? Click here for the complete tutorial.









To set the background color in your webpage you want to use the BACKGROUND-COLOR property.  Like other color selection properties you can use either a hexadecimal value or color name.  The background of your whole page is defined using the body selector.

Property: background-color
Value: color name or hexadecimal value
Example: body {background-color: #ADD8E6;}
Result: Sets the CSS rule to make the background color of your webpage light blue.


To set an image as the background of your webpage you want to use the BACKGROUND-IMAGE property.  You can use this property to set the background of your whole page using the body selector or you can use it for any element you’d like to have an image as the background, like a table or paragraph.

When using an image as a background, the default setting is for the image to repeat itself to fill the available space.  You can specify how you would like the image to repeat or to not repeat at all using the BACKGROUND-REPEAT property with the values: repeat-x (repeats only horizontally), repeat-y (repeats only vertically) or no-repeat.

  It is important to select an image that does not compete with the text or other elements of your webpage.  Using a complex image may result in difficulties when users are trying to view your webpage.

Property: background-image
Value: url(“X”) The link to your image file.
Supporting Property: background-repeat To define image repetition
Value: repeat-x, repeat-y or no-repeat.
Example: body {background-image: url(“background.jpg”); background-repeat: repeat-y;}
Result: Applies the CSS rule to make your background the selected image and to have the image repeat vertically only.

Fixed Images

When using an image as a background you can also control whether or not it scrolls with the other elements of your webpage.  Using the BACKGROUND-ATTACHMENT property and the values: scroll or fixed.  Scroll is the default setting and allows the background image to move when your user is navigating your webpage and fixed sets the background image to not move.  For example, when the image is set to fixed, the position of the image will always be in the background, no matter what part of the page your user is currently viewing.

Property: background-attachment
Value: scroll or fixed
Example: body {background-image: url(“background.jpg”); background-attachment: fixed;}
Result: Sets the CSS rule to make the background the image you selected and to have a fixed position on the page.