7 propiedades de fondo CSS para darle vida a tus diseños web

El tema de fondo de su sitio web puede afectar significativamente su apariencia. Los colores, las imágenes y los patrones de fondo evocan emociones y crean excelentes experiencias de usuario.

Puede utilizar las propiedades de fondo de CSS para establecer el estilo de fondo de los elementos HTML. Aprenda todo sobre algunas de las propiedades de CSS que puede usar para crear excelentes fondos.

1. color de fondo

El propiedad de color de fondo establece el color del fondo de un elemento. Puede configurar el color con un nombre como "rojo", un valor HEX como "#00FF00" o un valor RGB, como "rgb (0, 255, 0)". También puede usar un valor HSL para establecer el color de fondo usando el tono, la saturación y la luminosidad.

El siguiente ejemplo establece el color de fondo de toda la página en naranja. Cada uno de los elementos de encabezado tiene un fondo diferente.

<cuerpo>
<h2>yo soy verdeh2>
<h3>yo soy rojoh3>
<h4>Soy azulh4>
cuerpo>

Usando CSS, puede aplicar un color de fondo único a cada elemento:

cuerpo {
color de fondo: naranja;
}
h2 {
color de fondo: #006600;
}
h3 {
color de fondo: RGB(128, 0, 0);
}
h4{
color de fondo: hsl(240, 100%, 50%);
}

Esto le dará estilo a la página para que se vea como:

Puede utilizar la propiedad de opacidad para determinar la transparencia de un elemento. La opacidad toma valores entre 0.0 y 1.0. Cuanto menor sea el valor, más transparente será el elemento.

Como ejemplo, intente establecer la opacidad de un elemento del cuerpo en 0,5:

cuerpo {
color de fondo:naranja;
opacidad:0.5;
}

Esto se mostrará de la siguiente manera: compare los colores con los de la captura de pantalla anterior:

2. imagen de fondo

La propiedad background-image establece una imagen como fondo de un elemento. Puede hacer referencia a una imagen local o una de Internet.

<cuerpo>
 <h1>Holaallá!h1>
 <pag>Itenerunimagenenmifondo!pag>
cuerpo>

El archivo CSS:

cuerpo {
imagen de fondo:url("https://imágenes.pexels.com/fotos/1191710/pexels-foto-1191710.jpeg?auto=comprimir&cs=Tinysrgb&w=1260&h=750&dpr=1");
}

Esto se mostrará así:

También puedes usar gradientes de fondo para crear una apariencia única para su aplicación.

3. repetición de fondo

La propiedad background-image repite imágenes por defecto. Puede elegir repetir la imagen horizontalmente en el eje x o verticalmente en el eje y.

Alternativamente, si una repetición no se adapta a su estilo, puede eliminarla usando el valor sin repetición.

<cuerpo>
<h1>¡Hola!h1>
<h3>¡Estoy demostrando la propiedad repetir fondo-repetir en el eje x!h3>
cuerpo>

Usa el siguiente CSS para aplicar un fondo repetitivo a lo largo del eje x:

cuerpo {
imagen de fondo: URL("https://imágenes.pexels.com/fotos/459335/pexels-foto-459335.jpeg?auto=comprimir&cs=Tinysrgb&w=1260&h=750&dpr=1");
repetición de fondo: repetir-x;
}

El resultado:

A continuación, intente repetir la imagen en el eje y:

cuerpo {
imagen de fondo:url("https://disco compacto.pixabay.com/foto/2016/04/18/22/05/conchas marinas-1337565__340.jpg");
repetición de fondo:repetir-y;
}

El resultado:

El ejemplo en el eje y ciertamente parece distorsionado. Si estos no son los patrones que está buscando, puede especificar sin repetición en cambio:

cuerpo {
imagen de fondo:url("https://imágenes.pexels.com/fotos/259915/pexels-foto-259915.jpeg?auto=comprimir&cs=Tinysrgb&w=600");
repetición de fondo:no-repetir;
}

El resultado:

4. posición de fondo

La propiedad background-position define la posición de la imagen de fondo dentro de su elemento. Utiliza palabras clave específicas de la posición como centro, arriba, y abajo, o un valor de píxel o porcentaje.

Agregue una propiedad de posición de fondo a la última imagen:

cuerpo {
imagen de fondo: URL("https://imágenes.pexels.com/fotos/259915/pexels-foto-259915.jpeg?auto=comprimir&cs=Tinysrgb&w=600");
posición de fondo: arribacentro;
}

Se verá así:

Puede ver que la imagen distorsiona el aspecto del sitio web. Arreglemos eso con la siguiente propiedad.

5. tamaño de fondo

Puede usar la propiedad de imagen de fondo para definir un tamaño específico para la imagen. Utiliza palabras clave como cubrir y contener o un valor de píxel o porcentaje. Arreglemos la imagen de fondo distorsionada agregando una propiedad de tamaño de fondo.

cuerpo {
 imagen de fondo: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=comprimir&cs=tinysrgb&w=600");
 repetición de fondo: sin repetición;
 posición de fondo: centro;

El resultado muestra que la imagen ahora cubre la página web proporcionalmente.

6. archivo adjunto de fondo

La propiedad background-attachment define si la posición de la imagen de fondo permanece fija o se desplaza. Puede utilizar las palabras clave fijas o de desplazamiento.

Mostremos eso en el siguiente código:

<cuerpo>
<h1>La propiedad background-attachmenth1>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
<pag>Con la propiedad de archivo adjunto fijo, notará que el fondo no se mueve con el texto.pag>
cuerpo>

El archivo CSS:

cuerpo {
imagen de fondo: URL("https://imágenes.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=comprimir&cs=Tinysrgb&w=600");
repetición de fondo: sin repetición;
posición de fondo: centro;
tamaño de fondo: cubrir;
archivo adjunto de fondo: fijado;
}

Si baja la página, notará que el fondo no se mueve:

Para demostrar la propiedad de archivo adjunto de fondo de desplazamiento, cambie la palabra clave a Desplazarse. Notarás que ahora el fondo se mueve con el texto.

cuerpo {
imagen de fondo: URL("https://imágenes.pexels.com/fotos/96627/pexels-foto-96627.jpeg?auto=comprimir&cs=Tinysrgb&w=600");
repetición de fondo: sin repetición;
posición de fondo: centro;
tamaño de fondo: cubrir;
archivo adjunto de fondo: Desplazarse;
}

7. La propiedad abreviada de fondo

Puede notar que necesita incluir varias propiedades para obtener el fondo perfecto. Esto implica escribir mucho código. Pero puede acortar el código usando la propiedad abreviada de fondo.

La propiedad abreviada le permite establecer muchas propiedades de fondo en una sola línea. Usas la palabra clave fondo para establecer la propiedad abreviada.

Por ejemplo, en lugar de escribir código como este:

cuerpo {
color de fondo: verde;
imagen de fondo: URL("portátil3.jpg");
repetición de fondo: sin repetición;
tamaño de fondo: cubrir;
archivo adjunto de fondo: Desplazarse;
posición de fondo: centro;
}

Puedes escribirlo en una sola línea, así:

cuerpo {
fondo: verdeURL("portátil3.jpg") sin repeticióncubrirDesplazarsecentro;
}

La propiedad abreviada sigue un orden particular. Debe alinear las propiedades en ese orden incluso si falta una o más. El orden es:

• color de fondo
• imagen de fondo
• repetición de fondo
• archivo adjunto de fondo
• posición de fondo

Puedes crear diseños interesantes con CSS usando varios patrones de fondo. Con estos patrones, puede lograr fondos únicos y destacados para su sitio web.

Otras propiedades de fondo en CSS

CSS es poderoso y hay mucho que puede hacer con él para darle vida a su aplicación. Puede usar propiedades como background-clip, background-origin y background-blend-mode para agregar algo de animación.

También puede usar degradados y patrones para personalizar sus páginas. Experimente con las propiedades de fondo de CSS para mejorar sus habilidades de diseño web.