Imágenes de fondo en diferentes posiciones (background-position)

La propiedad background-position controla la posición en la que se muestra la imagen de fondo de un elemento. Por defecto, las imágenes de fondo que no se repiten se muestran en la esquina superior izquierda del elemento. Si la imagen de fondo se repite horizontalmente, se muestra en la parte superior del elemento y si se repite verticalmente, se muestra en la parte izquierda del elemento.

Si sólo se indica un valor en la propiedad background-position, se considera que el segundo valor es center, que equivale al porcentaje 50%.

Si se indican dos valores en la propiedad background-position y uno de ellos no es una palabra clave (es decir, si al menos uno de ellos es una medida o un porcentaje) el primer valor se considera la posición horizontal y el segundo valor es la posición vertical.
En primer lugar, se puede utilizar cualquiera de las diferentes formas de indicar una medida en CSS para indicar la distancia que se desplaza la esquina superior izquierda de la imagen de fondo respecto de la esquina superior izquierda del elemento. El siguiente ejemplo muestra una misma imagen de fondo desplazada con diferentes unidades de medida:

Sintaxis

Valores

porcentaje Con el par de valores '0% 0%', la esquina izquierda de la imagen es alineada con la esquina izquierda del borde del espaciado de la caja. Un valor '100% 100%' pone la esquina inferior de la imagen en la esquina inferior del área de espaciado. Con un valor '14% 84%', el punto a 14% a la derecha y 84% abajo de la imagen es colocado en el punto al 14% derecha y 84% abajo del área de espaciado.
length con un valor '2cm 1cm', la esquina superior izquierda de la imagen es colocada a 2 cm a la derecha y a 1cm debajo de la esquina superior izquierda del área de espaciado.
top left y left top Es igual a '0% 0%'.
top, top center y center top Es igual a '50% 0%'.
right top y top right Es igual a '100% 0%'.
left, left center y center left Es igual a '0% 50%'.
center y center center Es igual a '50% 50%'.
right, right center y center right Es igual a '100% 50%'.
bottom left y left bottom Es igual a '0% 100%'..
bottom, bottom center y center bottom Es igual a '50% 100%'..
bottom right y right bottom Es igual a '100% 100%'.

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('imagenes/logo1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<h1>La propiedad de posición de fondo</h1>
<p>Aquí, la imagen de fondo se colocará en el centro del elemento (en este caso, el elemento del cuerpo).</p>
</body>
</html>

Ver ejemplo anterior

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('imagenes/logo1.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>
</head>
<body>
<h1>La propiedad de posición de fondo</h1>
<p>Aquí, la imagen de fondo se colocará centrada en la parte superior.</p>
</body>
</html>

Ver ejemplo anterior

Podemos mediante la propiedad background-position indicar la posición de la imagen con respecto al contenedor.

La sintaxis es la siguiente:

Elemento {
background-image: url("imagen1",
url("imagen2", ...);
background-position: posx posy ,
posx posy;
}

El par de valores que indicamos coincide con la posición de las imágenes que especificamos en la propiedad background-image.

Implementaremos una página que muestre una imagen de 700*400 y dentro de esta otra imagen que se ubique en los cuatro vértices de la imagen más grande.

Utilizaremos las imágenes:

La página es:

<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<style type="text/css">
#recuadro1{
background-image: url("logo1.png"),
url("logo1.png"),
url("logo1.png"),
url("logo1.png"),
url("foto1.jpg");
background-position: 0% 0%,
100% 0%,
0% 100%,
100% 100%;
background-repeat: no-repeat;
width:700px;
height:450px;
}
</style>
</head>
<body>
<div id="recuadro1">
</div>

</body>
</html>

Hay que recordar que la primer imagen que se muestra es la que especificamos última en la propiedad background-image. Luego en la propiedad background-position indicamos en el mismo orden la ubicación de cada image. La primera la ubicamos en el vértice superior izquierdo ya que especificamos los valores 0% 0%. La segunda imagen la especificamos en el vértice superior derecho con los valores 100% 0%. Así indicamos las otras dos imágenes. La quinta imagen no es necesario indicar el background-position ya que el ancho y alto coincide con los valores asignados a las propiedades width y height.

#recuadro1{
background-image: url("logo1.png"),
url("logo1.png"),
url("logo1.png"),
url("logo1.png"),
url("foto1.jpg");
background-position: 0% 0%,
100% 0%,
0% 100%,
100% 100%;
background-repeat: no-repeat;
width:700px;
height:450px;
}