Tamaño de imágenes de fondo (background-size)
Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

Tamaño de imágenes de fondo (background-size)

La propiedad CSS background-size especifica el tamaño de las imágenes de fondo.

Esta propiedad nos permite escalar una imagen dispuesta en el fondo. La sintaxis es:

Elemento { background-size: ancho alto; }

Estas longitudes se las puede especificar en píxeles, porcentajes etc.

Es una de las palabras claves:

  • contain Escala la imagen al mayor tamaño posible sin recortarla ni estirarla.
  • cover Escala la imagen al mayor tamaño posible sin estirarla. Si las proporciones de la imagen difieren de las del elemento, es recortada vertical u horizontalmente para que no quede un espacio vacío.

O bien, no o dos de los siguientes valores, que denota el tamaño horizontal y el tamaño vertical respectivamente (si sólo es especificado uno , el valor predeterminado para el segundo es auto )

  • Un valor <percentage> que escala la imagen de fondo en la dimensión correspondiente al porcentaje especificado del área de posicionamiento de fondo, que viene el valor determinado background-origin. El área de posicionamiento del fondo es, por defecto, el área que contiene el contenido de la caja y su relleno , el área también se puede cambiar a simplemente el contenido o el área que contiene bordes, el relleno y contenido. Si el fondo de es fijo, el área de posicionamiento del fondo es más bien toda el área de la ventana del navegador, sin incluir el área cubierta por las barras de desplazamiento si están presentes. Porcentajes negativos no son permitidos.
  • Un valor <length> que escala la imagen de fondo a la longitud especificada en la dimensión correspondiente. Longitudes negativas no están permitidos.
  • La palabra clave auto que escala el fondo de la imagen en la dirección correspondiente de modo que su proporción escencial se mantiene.

Por ejemplo si queremos mostrar tres imágenes dentro de un div con distintos tamaño:

<!DOCTYPE html>
<html>
<head>
<title>Prueba</title>
<style type="text/css">

#recuadro1{
background-image: url("logo1.png"),
url("logo1.png"),
url("foto1.jpg");
background-position: 0% 0%,
50% 50%;

background-size: 30px 30px,
250px 250px,
700px 450px;

background-repeat: no-repeat;
width:700px;
height:450px;
}

</style>

</head>
<body>

<div id="recuadro1">
</div>

</body>
</html>

Podemos ver que dibujamos tres imágenes "foto1.jpg" aparece en el fondo y luego dos veces mostramos "logo1.png" y le damos como tamaño al primero 30*30 píxeles y al segundo 250*250.

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

Si queremos que una imagen tome el tamaño por defecto que tiene la imagen sin reescalar podemos utilizar la palabra clave "auto", por ejemplo para mostrar la primer imagen con el tamaño original podemos escribir:

#recuadro1{ background-image: url("logo1.png"),
url("logo1.png"),
url("foto1.jpg");

background-position: 0% 0%,
50% 50%;

background-size: 50px 50px,
200px 200px,
auto auto;

background-repeat: no-repeat;
width:700px;
height:450px;
}

Si utilizamos como unidad porcentajes, la dimensión se basa en el elemento contenedor. Así un ancho y un alto de 50%, por ejemplo, hará que el fondo de la imagen llenar el recipiente 1/4: