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

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:

y la imagen:

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;
}

body {
  background:white;
  margin:50px;
}

</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;
}

Retornar