Búsqueda personalizada
 
 
 
 
Imágenes de fondo en diferentes posiciones (background-position)
   

Podemos mediante la propiedad background-position indicar la posicin 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 posicin de las imgenes que especificamos en la propiedad background-image.

Implementaremos una pgina que muestre una imagen de 700*400 y dentro de esta otra imagen que se ubique en los cuatro vrtices de la imagen ms grande.

Utilizaremos las imgenes:

 

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

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion