Propiedades del fondo

Background-position

Vamos a ubicar esta imagen de fondo con los siguientes valores de porcentaje. En este caso no la repetimos para poder observar bien la posición pero si no usáramos "no-repeat" la imagen comenzaría a repetirse desde la ubicación que le hemos dado.

BODY {background-color: #9999FF;
      background-image: url(bg-mancha.gif);
      background-repeat: no-repeat;
      background-position: 25% 75%;
     }

 Ver 

En este caso ubicamos la imagen usando un par de valores expresados en pixeles (la ubicación horizontal es negativa).

BODY {background-color: #9999FF;
      background-image: url(bg-mancha.gif);
      background-repeat: no-repeat;
      background-position: -16px 64px;
     }

 Ver 

A continuación usaremos algunas combinaciones de palabras clave.

right top y top right

BODY {background-color: #9999FF;
      background-image: url(bg-mancha.gif);
      background-repeat: no-repeat;
      background-position: top right;
     }

 Ver 

left, left center y center left

BODY {background-color: #9999FF;
      background-image: url(bg-mancha.gif);
      background-repeat: no-repeat;
      background-position: left center;
     }

 Ver 

bottom, bottom center y center bottom

BODY {background-color: #9999FF;
      background-image: url(bg-mancha.gif);
      background-repeat: no-repeat;
      background-position: bottom center;
     }

 Ver 

Background

Usando esta propiedad resumida vamos a definir el color de fondo y una imagen ubicada en el centro de la página que se repite en sentido vertical:

BODY {background: #9999FF url(bg-mancha.gif) repeat-y center }

 Ver