Presentamos un imprescindible recurso para los aficionados y profesionales del diseño web: la propiedad de tamaño de fondo de CSS3. Este tutorial, elaborado por nuestro equipo de expertos, te guiará a través de los pasos necesarios para dominar esta herramienta y aumentar la calidad visual de tus proyectos online. ¡No te lo pierdas en TIEngranaje!
CSS3 agrega varios nuevos propiedades de fondo al estándar CSS. Estas propiedades permiten un control mucho mayor del fondo del elemento de destino. En los próximos tutoriales, cubriremos las siguientes propiedades de fondo:
background-sizebackground-originbackground-clip
En este resumen, cubriremos los background-size propiedad y cómo aplicar múltiples imágenes de fondo para un solo elemento.
La propiedad de tamaño de fondo
El background-size La propiedad especifica el tamaño de la imagen de fondo. En CSS3 es posible especificar el tamaño de la imagen de fondo. La imagen en sí ya no es necesaria para llenar el 100 % del elemento. Las versiones actuales de los navegadores más populares ahora admiten el tamaño de fondo sin necesidad de prefijos de proveedores. Esto incluye Firefox, Safari, Chrome, Internet Explorer y Opera.
Sintaxis de tamaño de fondo
El background-size La propiedad se puede usar para especificar el tamaño de las imágenes de fondo de una de varias maneras. Puede elegir proporcionar una o dos longitudes, porcentajes o auto, contener palabra clave o cubrir palabra clave.
background-size: [length]|[percentage]|auto|cover|contain;| Valor | Descripción |
|---|---|
Length |
Establece la altura y el ancho de la imagen de fondo. El primer valor establece el ancho, el segundo valor establece la altura. Si solo se da un valor, el segundo se establece en “auto” |
Percentage |
Establece el alto y el ancho de la imagen de fondo en porcentaje del elemento principal. El primer valor establece el ancho, el segundo valor establece la altura. Si solo se da un valor, el segundo se establece en “auto” |
Auto |
El valor predeterminado, establece la imagen de fondo en su tamaño original |
Cover |
Escale la imagen de fondo para que sea lo más grande posible para que el área de fondo quede completamente cubierta. Es posible que algunas partes de la imagen de fondo no estén a la vista |
Contain |
Escale la imagen al tamaño más grande para que tanto su ancho como su alto puedan caber dentro del área de contenido |
Prefijo de proveedor
Para navegadores Firefox anteriores a la versión 4, se admite el siguiente prefijo de proveedor. Internet Explorer versión 8 y anteriores no admiten esta propiedad CSS3 ni proporcionan un prefijo de proveedor.
-moz-background-sizeEjemplos
En los siguientes ejemplos, veremos cómo usar los distintos valores al establecer la propiedad de tamaño de fondo. Usaremos la siguiente imagen para nuestros ejemplos.
Usaremos el siguiente código HTML para todos los ejemplos a continuación. La única diferencia entre los ejemplos siguientes es el valor asignado a la propiedad de tamaño de fondo.
<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
width: 100%;
height: 400px;
background-image: url(background.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-size: /* Defined by Specific Examples Below */;
}
</style>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>tamaño de fondo: automático
En este ejemplo, el background-size la propiedad se establece en auto. un valor de auto establece la imagen de fondo en su tamaño original. En este ejemplo, el div tiene un ancho del 100 % y una altura de 400 px. Sin embargo, la imagen solo tiene un ancho de 640 px y una altura de 360 px.
tamaño de fondo: contener
Si el valor de contener se asigna a la background-size propiedad, la imagen de fondo se escala, conservando la relación de aspecto de la imagen, para que sea lo más grande posible siempre que esté contenida dentro del área de posicionamiento del fondo. El ancho o alto de la imagen no excede el área de posicionamiento del fondo. Por lo tanto, puede haber algunas áreas del fondo que no estén cubiertas por la imagen de fondo.
tamaño de fondo: portada
Si el valor de cobertura se asigna a la background-size propiedad, la imagen de fondo se escala, conservando nuevamente la relación de aspecto de la imagen, pero en este caso, la imagen es lo más grande posible para que el área de posicionamiento del fondo quede completamente cubierta por la imagen de fondo.
A diferencia del contain valor, el cover El valor dará como resultado que el ancho o la altura de las imágenes sean iguales o superen el área de posicionamiento del fondo. Por lo tanto, es posible que algunas partes de la imagen de fondo no estén a la vista dentro del área de posicionamiento del fondo.
tamaño de fondo: longitudes
Si el background-size se especifica con valores de píxeles fijos para ancho y alto, la imagen de fondo se mostrará como se especifica. En este caso, se perderá la relación de aspecto original de la imagen. En el siguiente ejemplo, el background-size se establece en 250 px para el ancho y 250 px para la altura.
tamaño de fondo: porcentajes
Si el background-size se especifica con valores porcentuales fijos para ancho y alto, la imagen de fondo se mostrará como se especifica. En este caso, se perderá la relación de aspecto original de la imagen. En el siguiente ejemplo, el tamaño del fondo se establece en 60 % para el ancho y 40 % para el alto.
Múltiples imágenes de fondo
CSS3 le permite usar varias imágenes de fondo para un elemento. El background-size propiedad, como otras propiedades de fondo, permiten múltiples valores para el tamaño de fondo, especificando el uso de una lista separada por comas.
<style>
width: 100%;
height: 400px;
background-image: url(background1.png),url(background2.png);
background-repeat: no-repeat;
background-color: #ffffff;
background-position: 20px 100px, center bottom;
background-size: auto, auto;
</style>