Background image

We can use a picture as background of a page, or a paragraph, or a DIV section.

For example, we can use this picture (green.jpg)...


...as background of a DIV section, using an instruction like this:

DIV.green { background-image : url("green.jpg"); }

<DIV class="green">This background is green.</DIV>

Background repeat

A background image can cover an area like a tile in four ways:

• repeated horizontally and vertically. This is the default option.
  BODY { background-repeat : repeat; }
  
  
• repeated horizontally
  BODY { background-repeat : repeat-x; }
  
  
• repeated vertically
  BODY { background-repeat : repeat-y; }
  
  
• single, not repeated
  BODY { background-repeat : no-repeat; }
  
  

Background position

A background image can be placed on a specified position of the page.

• The horizontal position can be left, right, or center.
  
  
• The vertical position can be top, center, or bottom.

We can define the horizontal position using this instruction:

BODY { background-position : right; }

The default value of the vertical position is center.
To specify a different vertical position we must declare it as second value, this way:

BODY { background-position : right top; }

Background attachment

Using this instruction, the background image of the BODY becomes static, and does not scroll (see this example) :

BODY { background-attachment : fixed; }

Next page :

how to publish an HTML document on the web.