Cómo cambiar el color de fondo con CSS
Uno de los momentos más emocionantes en la carrera de cualquier desarrollador front-end en ciernes es aprender a cambiar el color de fondo de una página web.
Trabajar con HTML es genial y todo, pero con solo unas pocas líneas de CSS puede hacer que sus páginas y su viaje de programación cobren vida.
Esta guía cubrirá todo lo que necesita saber sobre cómo cambiar el color de fondo con CSS.
Configurar
Hagamos un pequeño trabajo preliminar.
Nota : Recomiendo usar Visual Studio Code con la extensión Live Server para ver los cambios en tiempo real a medida que actualiza el HTML y CSS.
- Crea una carpeta para los archivos de tu proyecto.
- Cree un archivo index.html para albergar su HTML. Puede usar código repetitivo o simplemente configurar algunas etiquetas <html> , <head> y <body> .
- Cree un archivo styles.css para su CSS.
- Vincula tu archivo CSS con el HTML colocando <link rel = "stylesheet" href = "styles.css"> dentro de las etiquetas <head> .
Ahora está listo para comenzar a editar el CSS.
Cómo cambiar el color de fondo con CSS
La forma más sencilla de cambiar el color de fondo es apuntar a la etiqueta del cuerpo . Luego, edite la propiedad background-color . Puede encontrar códigos de color buscando y utilizando la extensión del navegador Google Color Picker
body {
background-color: rgb(191, 214, 255);
}
Este código cambia el fondo a un bonito azul claro.
La propiedad background-color acepta colores en seis formas diferentes:
- nombre : lightkyblue; (para una aproximación cercana)
- código hexadecimal : # bfd6ff;
- rgb : rgb (191, 214, 255);
- rgba : rgba (191, 214, 255, 1); donde a es alfa (opacidad)
- HSL : hsl (218 °, 100%, 87%);
- HSLA : hsla (218 °, 100%, 87%, 1); donde a es alfa (opacidad)
Utilice la propiedad abreviada background en lugar de background-color para cortar código adicional. Puede cambiar el color de fondo de cualquier elemento HTML utilizando este método.
Cree un elemento <div> y asígnele una clase; en este caso, la clase es panel . Establezca sus propiedades de alto y ancho en CSS. Seleccione el elemento en CSS y elimine el color.
body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}
Aquí puede ver que la propiedad de fondo del cuerpo tiene un estilo independiente de la propiedad de fondo .panel .
La propiedad de fondo también acepta degradados:
body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}
Cómo cambiar la imagen de fondo en CSS
¿Qué sucede si desea que el fondo sea una imagen en lugar de un color sólido o degradado? La propiedad de fondo de taquigrafía es un amigo familiar.
Asegúrese de que la imagen esté en la misma carpeta que sus archivos HTML y CSS. De lo contrario, tendrá que usar la ruta del archivo entre paréntesis en lugar de solo el nombre:
body {
background: url(leaves-and-trees.jpg)
}
¡Vaya! Parece que la imagen está demasiado ampliada. Puede solucionarlo con la propiedad background-size .
body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}
Para usar la propiedad abreviada background junto con la propiedad background-size cover , también debe especificar las propiedades de la posición del fondo y separar los valores con una barra invertida (incluso si son valores posicionales predeterminados, como arriba a la izquierda ).
body {
background: url(leaves-and-trees.jpg) top left / cover;
}
¡Ahí tienes! Una imagen de fondo del tamaño adecuado en una línea de CSS.
Nota : tenga cuidado de no incluir imágenes de fondo de gran tamaño que ocupen mucho espacio de almacenamiento. Estos pueden ser difíciles de cargar en dispositivos móviles, donde tiene dos segundos para darles a los usuarios una razón para permanecer en la página.
Mejora tu juego CSS con CSS box-shadow
Para un desarrollador como usted, las propiedades de color de fondo e imagen de fondo son noticias viejas. Afortunadamente, siempre hay algo nuevo que aprender.
Intente darle un impulso a sus cajas con CSS box-shadow. ¡Sus elementos HTML nunca se vieron mejor!