Quick HTML


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>
This background is green.

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.

|   Back   |   Index   |   Next   |