Lenguaje CSS
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.
La propiedad 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 |
|---|---|---|
background-image |
none | No utiliza ninguna imagen de fondo. |
background-image |
url("imagen.jpg") |
Usa la imagen indicada como fondo. Las comillas no son obligatorias. |
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.
Gradientes o degradados
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 |
|---|---|
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 |
Las explicaremos un poco más adelante. 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.
Opciones de imagen de fondo
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:
La propiedad 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.
La propiedad 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.
La propiedad 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%).
La propiedad 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-boxla imagen de fondo se extenderá en todo el elemento, incluyendo borde, espaciado y contenido. El valorpadding-boxextenderá la imagen de fondo sólo mediante el padding y el contenido, y por último, la propiedadcontent-boxextenderá la imagen de fondo sólo en la zona del contenido.
La propiedad 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 {
background-image: url(https://manz.dev/manz-logo.png);
/* La imagen es de 320x320 píxels, la cambiamos a 48x48 */
background-size: 48px 48px;
}
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.
Fondos múltiples
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(imagen1), url(imagen2), ... |
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.
Atajo: 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. Aunque no es estrictamente obligatorio, se aconseja respetar el siguiente orden (acostumbrarse a usar el mismo orden es una buena práctica).
Existe un atajo clásico que no incorpora valores de propiedades como background-size o background-clip y que nos podemos encontrar aún por ahí, vamos a comentar ambos:
| Atajo | Orden |
|---|---|
| Atajo clásico | background: |
| Atajo moderno | background: |
Veamos un ejemplo de ambos atajos:
.element {
/* Atajo clásico */
background: #fff url(imagen.jpg) repeat-x scroll top left;
/* Atajo moderno */
background: #fff top left cover repeat-x padding-box border-box scroll url(imagen.jpg);
}
Recuerda que si alguno de los valores no los necesitamos, podemos simplemente omitirlo.
La propiedad opacity
Es posible utilizar la propiedad opacity para establecer una opacidad (transparencia total o parcial) sobre el elemento indicado. Hay que tener en cuenta que con opacity establecemos la opacidad al elemento en cuestión y todos sus elementos hijos. Si sólo deseamos aplicarla a ese elemento (y que no afecte al texto, por ejemplo), quizás sería mejor utilizar un canal alfa en el color de fondo.
La sintaxis de la propiedad opacity es la siguiente:
| Propiedad | Valor | Significado |
|---|---|---|
opacity |
Establece una transparencia con un valor del 0 al 1. |
|
opacity |
Establece una transparencia con un valor del 0% al 100%. |
Para indicar la opacidad podemos indicar tanto valores numéricos 0 (completamente transparente) y 1 (completamente visible), pasando por 0.25 o 0.75, así como valores porcentuales 0% (completamente transparente) y 100% (completamente visible):
.element {
background-color: #ff0000;
color: #ffffff;
opacity: 0.5;
opacity: 50%; /* Equivalente a la anterior */
}
Como se puede ver en la imagen, el efecto del <div> recuadro rojo puede conseguirse tanto con opacity como usando un background: rgb(255, 0, 0, 50%), sin embargo, la diferencia está en que si tenemos texto en su interior, con opacity también se verá semitransparente, sin embargo con background con canal alfa solo afectará al fondo, por lo que el texto mantiene su opacidad original.
.element {
background-color: rgb(255 0 0 / 50%);
color: white;
}
