Cómo usar CSS correctamente para el fondo de una web

La propiedad “background” de CSS le permite modificar el fondo de un elemento HTML. Gracias a esta propiedad, podremos agregar un color de fondo a un elemento, agregar una imagen, definir su posición, su número de repeticiones y muchas otras personalizaciones relacionadas con los fondos en HTML y CSS.

Independientemente entre sí, puede definir 8 valores de fondo diferentes.

Imagen de fondo

background-image permite definir en el fondo de un elemento varias o solo una imagen.

Si las dimensiones del elemento son menores que las de la imagen que se mostrará en el fondo, la imagen se cortará.

Sin embargo, si las dimensiones del elemento son mayores que las de la imagen, este se repetirá o no llenará todo el fondo de acuerdo con lo definido en la propiedad “background-repeat”.

Agregar una imagen de fondo: url ()

Este valor de URL (“ruta a la imagen”) integra una imagen en segundo plano reemplazando “ruta a la imagen” por la ruta para acceder a la imagen que se va a integrar.

Ejemplo:

background-image: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg");

Agregue un fondo de color degradado: degradado lineal ()

linear-gradient () dibuja un fondo degradado de color.

Ejemplo:

background-image: linear-gradient(to bottom, rgba(255,128,255,0.5), rgba(0,0,128,0.5));

Agregue una imagen de fondo con un filtro de color degradado: url () y degradado lineal ()

Al combinar los valores que se muestran arriba, puede agregar múltiples imágenes y degradados de color al fondo de un elemento.

Ejemplo:

background-image: linear-gradient(to bottom, rgba(255,128,255,0.5), rgba(0,0,128,0.5)), url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg");

background-position

background-position le permite definir una posición inicial desde la cual se mostrará el fondo.

Esta propiedad solo funciona si una imagen se configura en segundo plano con “background-image” y no llena perfectamente toda el área del elemento. Si ha puesto un fondo de color (o degradado de color) o la imagen llena perfectamente el fondo del elemento (la imagen se muestra por completo sin borde de relleno), entonces no verá ninguna diferencia en el uso de esta propiedad.

Mostrar el fondo en la parte superior, inferior derecha, izquierda o central de la página: superior, centro, inferior, izquierda, derecha

top, center, bottom, left, right definen la posición inicial del fondo de acuerdo con una palabra clave predefinida.

Ejemplos:

background-position: center;
background-position: top;

Coloque la imagen de fondo a lo largo del eje horizontal y vertical

Los valores numéricos (porcentaje, px, cm, ch, em, etc.) se utilizan para colocar la imagen de fondo a lo largo del eje horizontal (X) y vertical (Y).

La posición inicial (0, 0) se encuentra en la esquina superior izquierda del elemento.

El primer valor está relacionado con el eje horizontal (ancho) y el segundo está dedicado al eje vertical (alto).

El uso de un valor porcentual es relativo a las dimensiones del elemento.

Ejemplos:

background-position: 35% 80%;
background-position: -30px -50px;
background-position: 0 0;

background-size

background-size le permite definir el tamaño de las imágenes de fondo de un elemento.

Con esta propiedad podrá determinar si una imagen debe ocupar toda el área de fondo del elemento o si sus dimensiones deben modificarse para cubrir solo una parte del fondo.

Rellena el fondo duplicando la imagen: contiene

Este valor define si la imagen de fondo debe llenar el fondo con un duplicado de la imagen predeterminada si la imagen no es lo suficientemente grande.

Ejemplo:

background-size: contain;

Estire la imagen para cubrir el fondo: cubrir

Este valor indica si la imagen debe estirarse para cubrir todo el fondo.

Ejemplo:

background-size: cover;

Cambiar el tamaño de la imagen de fondo con valores numéricos y porcentajes

Las dimensiones de la imagen se pueden cambiar mediante un valor numérico o porcentual.

Ejemplos:

background-size: 20%;
background-size: 250px 150px;

background-repeat

background-repeat le permite definir si la imagen de fondo de un elemento debe repetirse o no si no cubre toda el área de fondo.

Se pueden utilizar varios valores juntos, por ejemplo, “espacio de repetición”.

 

Repite la imagen de fondo a lo largo del eje horizontal y vertical: repetir-x, repetir-y, repetir

Estos valores permiten repetir la imagen de fondo en el eje horizontal (repetir-x), vertical (repetir-y) o ambos al mismo tiempo (repetir) hasta cubrir todos los ejes. A repetir.

Ejemplos:

background-repeat: repeat-x;
background-repeat: repeat;

Repita la imagen tantas veces como sea posible en el espacio disponible sin recortar: espacio

La imagen de fondo se repetirá tantas veces como sea posible sin recortar. La primera y la última imagen se pegarán a los bordes del área de fondo del elemento.

Ejemplo:

background-repeat: space;

Repite la imagen y estírala para cubrir el espacio disponible: redondo

La imagen de fondo se repetirá tantas veces como sea posible y también se estirará cuando sea necesario para que la imagen no quede recortada ni quede espacio.

Ejemplo:

background-repeat: round;

No repita la imagen de fondo: no repetir

La imagen de fondo no se repetirá si no llena el área de fondo del elemento con sus dimensiones predeterminadas.

Como la imagen no se repite, su posición se puede establecer mediante la propiedad CSS: background-position.

Ejemplo:

background-repeat: no-repeat;

background-origin

background-origin permite definir el origen de la imagen de fondo integrada gracias a la propiedad CSS “background-image”. El origen de la imagen es relativo al borde, dentro del borde o dentro del área de fondo del elemento HTML.

Advertencia, background-origin no se tendrá en cuenta si el valor “fijo” se establece para la propiedad CSS “background-attach”.

Coloque la imagen de fondo de acuerdo con el borde: cuadro de borde

La imagen de fondo se colocará en relación con el borde del elemento.

Ejemplo:

background-origin: border-box;

Coloque la imagen de la fuente desde el interior del borde: padding-box

La imagen de fondo se colocará en relación con el interior del borde del elemento.

Ejemplo:

background-origin: padding-box;

Coloque la imagen de fondo de acuerdo con el contenido del elemento: cuadro de contenido

La imagen de fondo se colocará en relación con el contenido del elemento.

Ejemplo:

background-origin: content-box;

background-clip

background-clip te permite definir cómo una imagen (background-image) o color (background-color) se extiende al fondo de un elemento. El fondo puede extenderse hasta el borde, el interior del borde, sobre todo el contenido o incluso hasta el fondo de color de un texto.

Tenga cuidado, background-clip no tendrá ningún efecto visual si no se define ninguna imagen (background-image) o color (background-color) en el fondo.

border-box

La imagen o el color de fondo se extiende hasta el borde exterior del borde.

Ejemplo:

background-clip: border-box;

padding-box

El fondo no se dibujará en el área del borde. Se extenderá hasta el límite interior del borde (relleno).

Ejemplo:

background-clip: padding-box;

content-box

El fondo se limitará a las dimensiones del contenido del elemento.

Ejemplo:

background-clip: content-box;

text

El fondo se limitará al texto contenido en el elemento HTML. Puede mostrarse como un color de fondo del texto, si el color del texto está configurado como “transparente”.

Ejemplo:

background-clip: text;

-webkit-background-clip: text;

color: transparent;

Adjunto de fondo

background-attach le permite definir si la imagen de fondo permanece fija o si puede desplazarse con el desplazamiento del bloque circundante.

Se pueden utilizar varios valores si el fondo contiene varias imágenes, por ejemplo, “local, scroll”.

La posición de desplazamiento inicial en nuestros ejemplos será la siguiente:

Scroll

El fondo está vinculado al borde del elemento y permanece fijo en relación con el contenido. Por lo tanto, no se moverá si el elemento se desplaza.

Ejemplo:

background-attachment: scroll;

Fixed

El fondo permanecerá fijo. No se moverá con el elemento aunque el elemento pueda desplazarse.

Ejemplo:

background-attachment: fixed;

Local

El fondo puede desplazarse y se moverá con el elemento si se desplaza.

Ejemplo:

background-attachment: local;

Color de fondo

background-color le permite definir un color de fondo para un elemento HTML.

La propiedad background-color se define mediante un valor de “color” CSS y se puede especificar de diferentes formas.

Defina el color de fondo con una palabra clave

Ejemplo:

background-color: blue

También puede utilizar palabras clave especiales como “transparente”, “color actual” para definir su color de fondo.

Establecer el color de fondo con un valor hexadecimal

Ejemplo:

background-color: #4296f3;

Defina el color de fondo en RGB y RGBA

Ejemplo:

background-color: rgb(128, 255, 255);

Defina el color de fondo en HSL y HSLA

Ejemplo:

background-color: hsla(175, 100%, 75%, .50);

Background

background es una propiedad de CSS que permite definir en una sola línea todos los valores relacionados con la gestión de fondo de un elemento (background-color, background-image, background-origin, background-size, background -repeat, etc. ..).

Algunos ejemplos :

background: blue;

background: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg") no-repeat scroll border-box;

background: url("https://i.ibb.co/dkHwWBG/pexels-ihsan-aditya-1056251.jpg") text repeat;

Conclusión

La propiedad CSS permite grandes posibilidades para administrar fondos de elementos. Gracias al conjunto de propiedades de “fondo”, podrás adaptar perfectamente cualquier fondo al bloque que lo engloba.