Original article: CSS Background Image – With HTML Example Code

Lo que un usuario ve en un sitio web afectará la calidad de tu experiencia de usuario. También afectará la facilidad con la que pueden usar todo el sitio en general.

Agregar imágenes al fondo de ciertas partes de un sitio web suele ser más atractivo visualmente e interesante que simplemente cambiar el color de fondo.

Los navegadores modernos admiten una variedad de tipos de archivos de imagen como .jpg, .png, .gif, y .svg.

Este artículo explica cómo agregar imágenes a tu código HTML y cómo ajustarlas para que se vean mejor.

Sintaxis de imagen de fondo

El primer paso es asegurarse de crear un directorio (carpeta) de activos para guardar las imágenes que deseas usar en tu proyecto.

Por ejemplo, podemos crear una carpeta imagen en el proyecto en el que estamos trabajando y agregar una imagen llamada puestaDeSol.png que queremos usar.

La propiedad CSS background-image te permite colocar la imagen detrás de cualquier elemento HTML que desee.

Esta podría ser la página completa (usando el selector  body en CSS que apunta al elemento <body> en nuestro HTML), o solo una parte específica e independiente de la página, como un elemento de section como en el ejemplo a continuación.

Para agregar un background-image a una etiqueta section en tu archivo .css, escriba el siguiente código:

section {
     background-image: url("imagen/puestaDeSol.png");
        }

Vamos a discutir lo que está pasando aquí en detalle:

  • section especifica la etiqueta a la que desea agregar la imagen.
  • url() se usa para decirle a CSS dónde se encuentra nuestra imagen.
  • Dentro de los paréntesis, "imagen/puestaDeSol.png" está la ruta a la imagen. Esto le permite al navegador saber qué URL extraer.
  • La ruta en este ejemplo se denomina ruta, relativa lo que significa que es un archivo local, relativo a nuestro proyecto y a nuestro directorio de trabajo actual, y no es una dirección web. Para agregar imágenes también podemos usar una ruta absoluta, que es una dirección web completa y comienza con una URL de dominio (http://www.).
  • Usar comillas es un buen hábito, pero podemos omitirlas, por lo que background-image: url(imagen/puestaDeSol.png) funciona igual.
  • ¡No olvides el punto y coma!

Cómo detener la repetición del fondo

Cuando aplicas una imagen de fondo a un elemento, por defecto se repetirá.

Si la imagen es más pequeña que la etiqueta de la que es fondo, se repetirá para completar la etiqueta.

¿Cómo evitamos que esto suceda?

La propiedad background-repeat toma 4 valores y podemos cambiar la dirección en la que se repite la imagen, o evitar que la imagen se repita por completo.

section {
    background-repeat: repeat;
        }

Este es el valor predeterminado si no le damos un valor a la propiedad background-repeat. En este caso, la imagen se repite tanto horizontal como verticalmente, tanto en la dirección x como en la dirección y, respectivamente, hasta que llena el espacio.

Screenshot-2021-07-20-at-9.10.06-PM
section {
    background-repeat: no-repeat;
        }
Screenshot-2021-07-20-at-9.11.39-PM

El valor no-repeat evita que la imagen se repita desde todas las direcciones. La imagen solo se muestra una vez.

section {
    background-repeat: repeat-y;
        }

Este valor repite la imagen solo horizontalmente en la página. La imagen se repite a lo largo de la página, en la dirección x. La dirección x en matemáticas es de izquierda a derecha.

section {
    background-repeat: repeat-y;
        }

Este valor repite la imagen solo verticalmente en la página. La imagen se repite hacia abajo en la página, en la dirección y. La dirección y en matemáticas es de arriba hacia abajo.

Cómo establecer la posición del fondo

Después de agregar una imagen de fondo y evitar que se repita, podemos controlar aún más cómo se ve dentro del fondo de la etiqueta al mejorar tu posición.

Usaremos la propiedad background-position para hacer esto.

El selector toma dos valores. El primero es para la posición horizontal o dirección x (cuán lejos de la etiqueta). El segundo es para la posición vertical, o dirección y (hasta dónde baja la etiqueta).

Los valores pueden ser unidades, como un par de píxeles:

section {
    background-position: 20px 30px;
        }

Esto moverá la imagen 20px a lo ancho y 30px hacia abajo en la etiqueta contenedora.

En lugar de píxeles, podemos usar un conjunto de palabras clave como derecha, izquierda, arriba, abajo o centro para colocar la imagen a la derecha, izquierda, arriba, abajo o en el centro de la etiqueta.

section {
    background-position: right center;
        }

Esto coloca la imagen en el lado derecho del centro de la etiqueta.

Screenshot-2021-07-21-at-9.02.55-AM

Si quisiéramos centrarlo tanto en horizontal como en vertical, haríamos lo siguiente:

section {
    background-position: center center;
        }
Screenshot-2021-07-21-at-9.07.41-AM

Para posicionar una imagen con mayor detalle, cabe mencionar que podemos utilizar porcentajes.

section {
    background-position: 20% 40%;
        }

Esto coloca la imagen un 20% a través de la etiqueta y un 40% hacia abajo.

Hasta ahora hemos visto valores usados en combinación, pero también podemos especificar un valor como background-position: 20px; o background-position:center; o background-position: 20%;, que lo aplica en ambas direcciones.

Cómo cambiar el tamaño de una imagen de fondo

Para controlar el tamaño de la imagen de fondo podemos usar la propiedad background-size.

Nuevamente, al igual que las propiedades anteriores mencionadas, toma dos valores. Uno para el tamaño horizontal (x) y otro para el tamaño vertical (y).

Podemos usar píxeles, así:

section {
    background-size: 20px 40px;
    /* dimensiona la imagen 20px de ancho y 40px de altura */
        }

Si no sabemos el ancho exacto del contenedor en el que estamos almacenando la imagen, hay un conjunto de valores específicos que podemos dar a la propiedad.

  • background-size: cover; cambia el tamaño de la imagen de fondo para que cubra todo el espacio de fondo de la etiqueta sin importar el ancho de la etiqueta. Si la imagen es demasiado grande y tiene una relación mayor con respecto a la etiqueta en la que se encuentra, esto significa que la imagen se estirará y, por lo tanto, se recortará en sus bordes.
  • background-size: contain; contiene la imagen, como sugiere el nombre. Se asegurará de que toda la imagen se muestre en el fondo sin recortar nada. Si la imagen es mucho más pequeña que la etiqueta, quedará un espacio vacío que hará que se repita para llenarlo, por lo que podemos usar background-repeat: no-repeat; regla que mencionamos anteriormente.

La regla background-size:cover; en este caso se recortarán partes de la imagen.

Screenshot-2021-07-21-at-9.18.15-AM

Cuando lo cambiamos a background-size:contain; vemos que la imagen se encoge para ajustarse a la etiqueta section.

Screenshot-2021-07-21-at-9.18.49-AM

Cómo utilizar la propiedad Background Attachment

Con la propiedad background-attachment podemos controlar dónde se adjunta la imagen de fondo, es decir, si la imagen está fija o no en el navegador.

El valor predeterminado es background-attachment: scroll;, donde la imagen de fondo permanece con su etiqueta y sigue el flujo natural de la página desplazándose hacia arriba y hacia abajo a medida que nos desplazamos hacia arriba y hacia abajo.

El segundo valor que puede tener la propiedad es background-attachment: fixed;. Esto hace que la imagen de fondo permanezca en la misma posición, fijada a la página y fijada en la ventana gráfica del navegador. Esto crea un efecto de paralaje del que puedes ver un ejemplo aquí:

Degradados de fondo

Un caso de uso diferente para la propiedad background-image es decirle al navegador que cree un degradado.

El background-image en este caso no tiene una URL, sino un lineal-gradient.

La forma más sencilla de hacer esto es especificar el ángulo. Esto controla la dirección del degradado y cómo se combinarán los colores. Por último, agregue dos colores que desee combinar en un degradado para el fondo de la etiqueta.

Un degradado que va de arriba a abajo y de negro a blanco es:

section {
    background-image: linear-gradient(black,white);
        }

Los grados más comunes utilizados para los gradientes son:

  • 0 grados de arriba a abajo
  • 90 grados de izquierda a derecha
  • 180 grados de abajo hacia arriba
  • 270 grados de derecha a izquierda

Cada uno de los grados anteriores se corresponde con la parte superior, la derecha, la parte inferior y la izquierda, respectivamente.

section{
  background-image: linear-gradient(to left,pink,orange);
        }

En lugar de colores de palabras clave, podemos usar colores hexadecimales para ser más específicos y tener una gama más amplia de opciones:

section{
  background-image: linear-gradient(to left,#42275a, #734b6d)
      }

También podemos incluir más de dos colores en un degradado, creando diferentes efectos y esquemas de color.

Conclusión

Esto marca el final de nuestra introducción a la sintaxis básica de la propiedad background-image.

A partir de aquí, las posibilidades son infinitas y dejan espacio para mucha expresión creativa. Estos efectos ayudan a que el usuario tenga una experiencia agradable al visitar su sitio web.

Espero que esto haya sido útil, y gracias por leer..

¡Diviértete con tus diseños y feliz codificación!