Es posible que, buscando hacer un diseño más avanzado, en lugar de utilizar un color de fondo quieras utilizar imágenes. Para ello, CSS te proporciona la propiedad background-image
, con la cuál puedes indicar imágenes de fondo o, como veremos más adelante, incluso gradientes o degradados de varios colores.
background-image
En el caso de querer utilizar imágenes de fondo, como ya hemos dicho, utilizaremos la propiedad background-image
y en el valor, el nombre de la imagen (o la dirección URL donde está alojada), siempre rodeada del texto url()
.
Propiedad | Valor | Significado | Más info |
---|---|---|---|
background-image |
none | No utiliza ninguna imagen de fondo. | |
background-image |
url("imagen.jpg") |
Usa la imagen indicada como fondo. | |
background-image |
Utiliza un gradiente de tipo lineal, radial o cónico. | Ver gradientes |
En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg
), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS que estamos escribiendo. Esto es lo que se llama una ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://lenguajecss.com/assets/logo.svg
, se accederá a la imagen alojada en esa dirección URL. Esto es lo que se llama ruta absoluta.
Ojo: En el caso de que no se encuentre la imagen o el valor de background-image se haya establecido a none, no se utilizará ninguna imagen de fondo, y en su lugar se mostrará el color establecido con background-color. Esto puede observarse también si tenemos una imagen de fondo que no se repite.
La propiedad background-image
además de imágenes mediante la función url()
, posee un mecanismo interesantísimo que permite establecer gradientes o degradados a partir de código. Hace muchos años, la única forma que teníamos de hacer esto, era crear el gradiente mediante un editor de imágenes y establecerlo como una imagen de fondo. Por suerte, actualmente hemos superado esa limitación.
Esencialmente, existen 3 funciones de gradientes: linear-gradient()
, radial-gradient()
y conic-gradient()
:
Basta con utilizar alguna de las siguientes funciones:
Función de gradiente | Significado | Más info |
---|---|---|
linear-gradient() |
Define un gradiente lineal, o sea, en una dirección específica. | Ver gradientes lineales |
radial-gradient() |
Define un gradiente radial, o sea, en forma de círculo o elipse. | Ver gradientes radiales |
conic-gradient() |
Define un gradiente cónico, o sea, un cono visto superiormente. | Ver gradientes cónicos |
Estas funciones se detallan en profundidad en sus respectivas secciones. Ten en cuenta que muchas de las siguientes propiedades de opciones de imágenes de fondo se pueden utilizar también con los gradientes o degradados.
Una vez establecida una imagen de fondo con background-image
, se puede personalizar la forma en la que se mostrará dicha imagen mediante propiedades como background-repeat
, background-attachment
o background-position
, entre otras:
Propiedad | Descripción |
---|---|
background-repeat |
Establece el modo en el que se repite la imagen de fondo de ser muy pequeña. |
background-attachment |
Indica si la imagen de fondo permanece fija o se desplaza al hacer scroll. |
background-position |
Establece una posición para la imagen de fondo, de modo que podemos moverla de sitio. |
background-clip |
Modo de relleno de la imagen de fondo. (Ver tema de modelo de cajas). |
background-origin |
Origen de la imagen de fondo si se utiliza background-clip . (Ver tema de modelo de cajas). |
background-size |
Establece un tamaño diferente a la imagen de fondo. |
Analicemos cada una de las propiedades a continuación:
background-repeat
La propiedad background-repeat
especifica si la imagen se repetirá horizontalmente (repeat-x), si se repetirá verticalmente (repeat-y), si lo hará en ambas direcciones (repeat) o en ninguna (no-repeat). Por defecto, si no se indica nada, esta propiedad está ajustada en repeat.
Valor | Significado |
---|---|
repeat | Repite la imagen de fondo horizontal y verticalmente. |
repeat-x |
Repite la imagen de fondo sólo horizontalmente (eje x). |
repeat-y |
Repite la imagen de fondo sólo verticalmente (eje y). |
space |
Repite la imagen y rellena con espacio los huecos. |
round |
Repite la imagen y amplia cada repetición para ajustar. |
no-repeat |
La imagen de fondo no se repite. |
Existen también dos valores interesantes, space y round, los cuales asumen implícitamente que se repite el fondo. En el caso de que tengamos una imagen de fondo que se repita varias veces en mosaico, space
evita que se corte la imagen, introduciendo un espacio entre las repeticiones individuales.
Por su parte, round
lo que hace es ajustar la imagen individual, de modo que la expande o contrae para ajustarla al espacio disponible. En ambos casos la repetición de los fondos nunca se mostrará cortada.
Siempre se podrá combinar en cada eje, con valores mixtos, por ejemplo, utilizando background-repeat: space round
, lo que aplicará space
al eje X y round
al eje Y. Si sólo se especifica uno, se aplicará a ambos ejes.
background-attachment
La propiedad background-attachment
especificará si la imagen de fondo seguirá el desplazamiento del usuario al hacer scroll por la página, es decir, si el usuario al hacer scroll y bajar para ver el contenido de la página, la imagen de fondo de desplazará hacia arriba siguiendo el flujo normal de una página. Este comportamiento se consigue con la opción scroll
, que es la que viene establecida por defecto.
Valor | Significado |
---|---|
scroll | Cuando hacemos scroll la imagen de fondo se desplaza. |
fixed |
Cuando hacemos scroll, la imagen de fondo permanece fija. |
Por el contrario, si indicamos el valor fixed
, la imagen de fondo se quedará fijada y no se moverá mientras el usuario se desplaza por la página, algo que puede ser útil en muchos escenarios.
background-position
La propiedad background-position
permite desplazar la imagen en la zona especificada por
Valor | Significado |
---|---|
1 parámetro. Desplaza la imagen de fondo al punto (x, 50%). | |
2 parámetros. Desplaza la imagen de fondo al punto (x, y). |
Si sólo se especifica un valor, se tomará para el eje x, mientras que el valor del eje Y será automáticamente establecido a center (o 50%).
background-clip
En CSS existen unas propiedades para indicar como cubrirá la imagen de fondo al elemento seleccionado para darle estilo. Estas propiedades son las siguientes:
Propiedad | Valor | Significado |
---|---|---|
background-clip |
border-box | padding-box | content-box |
Modo de relleno de la imagen de fondo |
background-origin |
border-box | padding-box | content-box |
Origen del modo de relleno del fondo |
La propiedad background-clip
establece la forma en la que el color o la imagen de fondo cubrirá el elemento, mientras que la propiedad background-origin
intenta posicionar el comienzo de la imagen de fondo, útil con imágenes. La primera utiliza border-box como valor por defecto, mientras que la segunda utiliza padding-box.
Ambas propiedades pueden tomar uno de los siguientes valores:
Valor | Significado |
---|---|
padding-box |
La imagen o color de fondo cubrirá la zona del espaciado y contenido. |
border-box |
La imagen o color de fondo cubrirá la zona del borde, espaciado y contenido. |
content-box |
La imagen o color de fondo cubrirá sólo la zona del contenido. |
Consejo: Una buena forma de darse cuenta del funcionamiento de estas propiedades es establecer un borde grueso punteado. Usando
border-box
la imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valorpadding-box
extenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedadcontent-box
extenderá la imagen de fondo sólo en la zona del contenido.
background-size
Una propiedad muy interesante es background-size
, la cuál nos permite dar un tamaño a la imagen de fondo. Podemos ajustar tanto el tamaño de ancho como el de alto, e incluso tenemos algunas palabras clave predefinidas para obtener un resultado específico. Veamos la sintaxis:
Valor | Significado |
---|---|
1 parámetro. Aplica un |
|
2 parámetros. Aplica un |
Por defecto, una imagen de fondo toma automáticamente el tamaño de la imagen (que podría ser demasiado grande, por ejemplo). Para no tener que modificar la imagen original de forma manual con un editor de imágenes, podemos utilizar esta propiedad y ajustarla a nuestro agrado mediante CSS:
.element {
width: 320px;
height: 320px;
background-image: url("https://manz.dev/manz-logo.png");
/* La imagen es de 320x320 píxels, la cambiamos a 160x160 */
background-size: 160px 160px;
}
<div class="element"></div>
Ten en cuenta que al indicar el tamaño de ancho y alto de forma manual, hay que vigilar el tamaño original de la fotografía para evitar que se deforme y aparezca estirada o deformada porque el nuevo tamaño no manteniene la proporción de aspecto.
Ten en cuenta que con background-size
puedes utilizar los siguientes valores:
Valor | Significado |
---|---|
auto | No escala la imagen. Utiliza el tamaño original. Es el valor por defecto. |
Indicamos el tamaño específico que queremos usar (píxels o porcentaje, por ej.). | |
cover |
Escala el ancho de la imagen de fondo al ancho del elemento. |
contain |
Escala el alto de la imagen de fondo al alto del elemento. |
Los dos últimos valores, cover
y contain
, sólo pueden indicarse en el caso de que se especifique un sólo parámetro como valor en la propiedad background-size
.
Hasta ahora, hemos trabajado con CSS para establecer un sólo fondo mediante la propiedad background-image
. Sin embargo, CSS permite establecer múltiples fondos separando por comas:
Propiedad | Descripción |
---|---|
background-image: url( ), url( ), ... |
Establece varias imágenes de fondo en un elemento. |
Hay que tener en cuenta que la primera imagen establecida es la que permanecerá al frente, la siguiente imagen añadida aparecerá detrás de la primera y así con todas las imágenes que se vayan indicando. Esto podemos utilizarlo a nuestro favor si colocamos una imagen en formato .png
o .webp
, las cuales soportan transparencias:
.element {
background-image: url("manz.png"), url("layer.webp"), url("fondo.jpg");
background-repeat: no-repeat, repeat-x, repeat-x;
}
Observa que al tener múltiples imágenes de fondo en la propiedad background-image
, las propiedades derivadas de background-*
pasan a ser múltiples también, ya que cada valor se aplica en orden a su respectiva imagen de fondo. En el caso de dejar sólo un valor, se aplicará a todas las imágenes de fondo:
.element {
background-image: url("manz.png"), url("layer.webp"), url("fondo.jpg");
background-repeat: no-repeat; /* En este caso, las 3 imágenes no se repiten */
}
Ojo: Ten en cuenta que al igual que podemos indicar múltiples imágenes, también podemos indicar múltiples gradientes, que veremos en el próximo tema.
background
Es posible establecer todas estas propiedades anteriores en una sola regla de CSS a modo de atajo, y así ahorrar mucho espacio en escribir las propiedades anteriores por separado. Si alguno de los valores no necesitamos indicarlo, simplemente lo omitimos.
El atajo se construye con la propiedad background
y sigue la siguiente estructura:
Atajo | Orden |
---|---|
background |
Ten en cuenta que el parámetro /
/
, la propiedad background
se esperará el valor background-size
a continuación. Veamos varios ejemplos del uso de la propiedad background
:
.element {
/* Atajo simple */
background: #fff url("imagen.jpg") top center repeat-x;
/* Atajo completo */
background: deeppink url("imagen.jpg") 0 0 / 150px space scroll padding-box padding-box;
/* Atajo múltiple */
background:
url("primer-plano.jpg") center center / cover,
deeppink url("imagen.jpg") 0 0 / 150px space scroll padding-box padding-box;
}
Recuerda que si alguno de los valores no los necesitamos, podemos simplemente omitirlo.
Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.
Puedes encontrar más sobre mi en Manz.dev