Background in CSS: A Practical Guide

CSS background properties help define background effects for elements. Background properties in CSS include:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Background color

The backgroud-color feature defines the background color for the element.

 body { 
  background-color: lightblue; 
 } 

Colors in CSS are typically determined by

• color name, like 'red'.
• HEX color values, like # ff0000.
• RGB value, like rgb (255,0,0).

In the example below, the elements

,

and

There are different background colors.

 h1 { 
  background-color: green; 
 } 
 
 div { 
  background-color: lightblue; 
 } 
 
 p { 
  background-color: yellow; 
 } 

Background

The background-image takes the image as the background for the element. By default the image will be duplicated to cover the entire element.

 body { 
  background-image: url("paper.gif"); 
 } 

Note that when using the image as a background, do not let it insert or make the text difficult to read.

Repeating vertical and horizontal background images

By default, the background-image will be repeated both horizontally and vertically to cover the entire element. Some photos should only be repeated in one direction, otherwise they will look very bad. Then use the background-repeat: repeat-x; to repeat horizontally and background-repeat: repeat-y; to repeat vertically.

 body { 
  background-image: url("gradient_bg.png"); 
  background-repeat: repeat-x; 
 } 

Background image, set position and no repeat

To get an image as a background and do not want to repeat it, use the background-repeat.

 body { 
  background-image: url("img_trejpg"); 
  background-repeat: no-repeat; 
 } 

Images appear once on the page

The example on the picture appears only once and appears in the same place as the text. So we should change the image position with the background-position.

 body { 
  background-image: url("img_tree.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  margin-right: 200px; 
 } 

Images no longer insert text when changing positions

Background image, fixed position

To specify a fixed background image (without scrolling along the whole page), use the background-attachment.

 body { 
  background-image: url("img_tree.jpg"); 
  background-repeat: no-repeat; 
  background-position: right top; 
  background-attachment: fixed; 
 } 

When scrolling the page, the image remains in its original position

Background image, shortened feature

To shorten the code, you can specify all properties for the background in a single property, this is called a shortened feature. The shortened feature of the background. is the background.

 body { 
  background: #ffffff url("img_tree.jpg") no-repeat right top; 
 }