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%; }
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; }
A continuación usaremos algunas combinaciones de palabras clave.
BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: top right; }
BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: left center; }
BODY {background-color: #9999FF; background-image: url(bg-mancha.gif); background-repeat: no-repeat; background-position: bottom center; }
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 }