0 Comentarios
Cuando nos ponemos a diseñar una página web, a veces no le damos mucha importancia al fondo. Pero, créenos, marca la diferencia. Si has llegado hasta aquí buscando cómo poner color de fondo en HTML, quédate porque vamos a contarte todo lo que necesitas saber, de manera fácil, profesional y, por qué no, divertida.
El color de fondo es, básicamente, el color que ves detrás de todo el contenido de tu web. Puede ser blanco, negro, azul chillón... o un degradado espectacular ?. Tú decides qué atmósfera quieres transmitir.
En HTML, para cambiar el fondo, combinamos etiquetas con CSS. Así conseguimos que tu página no solo se vea mejor, sino que también transmita sensaciones. Y de eso, al final, va una buena web, ¿no?
El método clásico (aunque un poquito anticuado) es añadir un color directamente al <body>:
<body bgcolor="lightblue">
<h1>Hola mundo</h1>
</body>
Importante: hoy en día no se recomienda usar bgcolor porque es mejor separar estructura (HTML) y diseño (CSS).
Otra forma más moderna es usando el atributo style en línea:
<body style="background-color: lightblue;">
<h1>Hola mundo</h1>
</body>
Fácil, ¿verdad? Aunque si el proyecto crece, puede complicarse.
La opción más limpia y profesional:
Creas un archivo CSS, por ejemplo estilos.css.
Escribes:
body {
background-color: lightblue;
}
3. Y lo enlazas a tu HTML:
<link rel="stylesheet" href="estilos.css">
Así el código está ordenado y fácil de mantener.
Los códigos HEX son muy populares. Por ejemplo:
background-color: #ff5733;
Este color es un naranja rojizo muy potente ?.
HTML reconoce nombres como red, blue, green, gold, entre otros.
background-color: gold;
Eso sí, estás limitado a una lista de nombres predefinidos.
RGB: combina rojo, verde y azul.
background-color: rgb(255, 87, 51);
background-color: hsl(14, 100%, 60%);
Con HSL, ajustar tonos pastel o intensidades es mucho más intuitivo.
Nosotros usamos mucho Coolors cuando queremos inspirarnos y descubrir combinaciones armoniosas en diseños web.
Prioriza la legibilidad: que el texto se vea bien sobre el fondo.
No abuses de colores chillones: pueden cansar la vista.
Usa contrastes suaves: blanco sobre gris claro, por ejemplo.
Haz pruebas A/B: diferentes colores, diferentes resultados.
Un pequeño truco que usamos en Overant: si dudas, opta por tonos pastel o neutros. Casi nunca fallan ?.
Sí, usando:
background-image: url('imagen.jpg');
Los "web safe colors" eran importantes hace años, hoy los navegadores modernos soportan cualquier color.
Claro:
background: linear-gradient(to right, red, yellow);
Cambiar el color de fondo en HTML es más sencillo de lo que parece. Y además, es una de esas cosas que transforman una página aburrida en una que enamora.
¿Quieres llevar el diseño de tu web al siguiente nivel?
En nuestra agencia de diseño web en Alicante, te ayudamos a crear páginas web modernas, funcionales y, sí, también con los fondos más bonitos que puedas imaginar.
¡Escríbenos y cuéntanos tu proyecto! Estamos deseando ayudarte a darle vida a tu idea.
¿Qué te ha parecido este artículo?