1. Los navegadores
Las nuevas propiedades (background-origin, background-clip y background-size) del fondo (
http://www.w3.org/TR/css3-background/#background) son sólo parcialmente reconocidas por los navegadores. Por lo tanto, y como es habitual, resulta conveniente comprobarlas con y sin prefijo.
2. La posición inicial de una imagen
La propiedad background-origin permite definir la posición inicial de una imagen de fondo de una caja. Esta propiedad admite tres valores:
- padding-box: la imagen se situará en el límite del margen de la caja. Se trata del valor por defecto.
- border-box: la imagen se situará en el límite del borde de la caja.
- content-box: la imagen se situará en el límite del contenido de la caja.
Por el momento deberá usar los prefijos propietarios y los valores propietarios (border, padding y content).
Veamos un ejemplo:
#posicion-inicial {
width: 250px;
height: 150px;
border: 10px dotted; #333;
padding: 10px;
background: url("suricata.jpg")no-repeat;
-webkit-background-origin: border;
-moz-background-origin: border;
background-clip: border-box;
}
Así se visualizará con el valor border-box:
Así se visualizará con el valor padding-box:
Así se visualizará con el valor content-box:
Fíjese que la imagen aparece recortada.
3. Recortar una imagen
La propiedad background-clip permite recortar una imagen de fondo. Esta propiedad utiliza los mismo valores de la propiedad background-origin, con las mismas especificaciones.
Veamos un ejemplo con un fondo de color:
#recortar {
width: 250px;
height: 150px;
border: 10px dotted; #333;
padding: 10px;
background-color: lightblue;
-webkit-background-clip: border;
-moz-background-clip: border;
background-clip: border-box;
}
Así se visualizará con el valor border-box. Se puede ver el fondo azul en el borde.
Así se visualizará con el valor padding-box. El fondo azul se aplica al contenido y al espaciado (padding), pero no al borde.
Así se visualizará con la valor content-box. El fondo azul se aplica solamente al contenido (width).
4. El tamaño del fondo
La propiedad background-size permite definir el tamaño de la imagen de fondo en función del elemento que la contenga. Los valores posibles son:
- Un porcentaje del tamaño del elemento "contenedor": un único valor indicará el mismo tamaño para el lado horizontal y el vertical. Dos valores indicarán el tamaño horizontal, con el primer valor, y el tamaño vertical, con el segundo.
- Un valor: un único valor indicará el tamaño horizontal, y el tamaño vertical se calculará proporcionalmente.
- Dos valores indicarán el tamaño horizontal, con el primer valor, y el tamaño vertical, con el segundo.
- La palabra clave cover permite redimensionar la imagen todo lo posible, contain redimensiona conservando las proporciones.
En el ejemplo se ha reducido la imagen al 50% del tamaño de la caja que la contiene:
#tamaño {
width: 150px;
height: 100px;
border: 1px solid; #333;
background: url("suricata.jpg") no-repeat;
background-size: 50%;
}
Así se verá en la pantalla:
En este ejemplo, el tamaño es del 100% para las dos dimensiones, la imagen aparece deformada:
#tamaño{
width: 150px;
height: 50px;
border: 1px solid; #333;
background: url("suricata.jpg") no-repeat;
background-size: 100% 100%;
}
Así se verá en la pantalla:
En este ejemplo, la imagen tiene un tamaño fijo, no proporcional:
#tamaño {
width: 150px;
height: 50px;
border: 1px solid; #333;
background: url("suricata.jpg") no-repeat;
background-size: 100px 30px;
}
Así se verá en la pantalla:
En este ejemplo, el valor cover permite redimensionar proporcionalmente la imagen en un sentido. En este caso se trata de una redimensión horizontal. La imagen aparece cortada verticalmente.
#tamaño{
width: 150px;
height: 50px;
border: 1px solid; #333;
background: url("suricata.jpg") no-repeat;
background-size: cover;
}
Así se verá en la pantalla:
En este último ejemplo, el valor contain permite redimensionar proporcionalmente la imagen en un sentido que permita su publicación sin que aparezca cortada. En este caso se trata de una redimensión vertical. De este modo queda espacio libre horizontalmente.
#tamaño{
width: 150px;
height: 50px;
border: 1px solid; #333;
background: url("suricata.jpg") no-repeat;
background-size: contain;
}
Así se verá en la pantalla:
Espero haber ayudado en algo. Hasta la próxima oportunidad!
