Aprende cómo poner un fondo de color en HTML y dale vida a tus páginas

Contenido del Bootcamp Dirigido por: | Última modificación: 14 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Una de las formas más fáciles de dar vida a tu sitio web es agregando un fondo de color en HTML, esto te permite, con solo unos pasos, transformar una página simple y aburrida en un sitio visualmente atractivo y que vaya alineado con tu marca, porque, aunque no lo creas, el color influye muchísimo en la perspectiva de marca que tienes.

Hoy te mostraremos cómo agregar un fondo de color en HTML en ti sitio web. ¡Sigue los pasos!

Formas de agregar un fondo de color en HTML

Para agregar un fondo de color en HTML tienes diversos métodos que puedes usar. Veamos los más comunes y su implementación:

Usando el atributo style en HTML

La forma más sencilla y directa de agregar un fondo de color a un elemento en HTML es utilizando el atributo style dentro de la etiqueta de apertura. Veamos cuáles son las maneras de lograr esto:

  • Con un código de color hexadecimal

El método más popular es usar un código hexadecimal, que es un formato de seis dígitos precedido por un #.

<body style="background-color:#FF5733;">
<!-- Contenido de la página -->
</body>

El único cambio que veríamos reflejado sería el color del fondo sólido:

cómo poner un fondo de color en HTML: color sólido forma 1
  • Con nombres de colores HTML

Otra opción es usar nombres de colores predefinidos en HTML, como red, blue, green, etc.

<body style="background-color:blue;">
<!-- Contenido de la página -->
</body>

Quedaría así:

cómo poner un fondo de color en HTML: color sólido forma 2
  • Con valores RGB

Si prefieres trabajar con el modelo RGB (Red, Green, Blue), puedes especificar los valores de cada componente.

<body style="background-color:rgb(260,50,52);">
<!-- Contenido de la página -->
</body>

El resultado:

cómo poner un fondo de color en HTML: color sólido forma 3
  • Con valores RGBA para opacidad

El formato RGBA es similar al RGB, pero incluye un cuarto valor de colores en programación que controla la opacidad del color.

<body style="background-color:rgba(255,87,51,0.5);">
<!-- Contenido de la página -->
</body>

El resultado quedaría así:

cómo poner un fondo de color en HTML: color sólido forma 4 opacidad
  • Con valores HSL

El modelo HSL (Hue, Saturation, Lightness) es una alternativa al RGB, ideal para quienes trabajan con diseño gráfico.

<body style="background-color:hsl(14,100%,60%);">
<!-- Contenido de la página -->
</body>
cómo poner un fondo de color en HTML: color sólido forma 5

Uso de CSS para obtener un mejor control

Aunque el uso del atributo style es simple, usar CSS para el color te brinda más flexibilidad y mantiene tu código HTML limpio y organizado.

  • Fondo de color en el body con CSS

Puedes definir el color de fondo del cuerpo de la página directamente en tu archivo CSS:

body {
background-color: #FF5733;
}
cómo poner un fondo de color en HTML: CSS forma 1
  • Aplicar un fondo de color a elementos específicos

Para aplicar un color de fondo a un elemento en particular, como un div o una tabla, puedes hacer algo similar:

div.miDiv {
background-color: #33FF57;
}

Luego, en tu HTML, asegúrate de asignar la clase miDiv al elemento:

<div class="miDiv">
<!-- Contenido -->
</div>
cómo poner un fondo de color en HTML: CSS forma 2 sección

Crear degradados de color de fondo

Los degradados son una excelente manera de agregar profundidad a tu diseño. Con CSS, puedes crear degradados lineales o radiales.

  • Degradado lineal

Para un degradado que va de un color a otro en una dirección específica, usa linear-gradient:

body {
background-image: linear-gradient(to right, #FF5733, #33FF57);
}
cómo poner un fondo de color en HTML: CSS forma 3 degradado 1
  • Degradado radial

Para un degradado que se expande desde un punto central, usa radial-gradient:

body {
background-image: radial-gradient(circle, #FF5733, #33FF57);
}
cómo poner un fondo de color en HTML: CSS degradado 2

Ejemplos de uso

Aquí te dejo un ejemplo completo utilizando HTML y CSS para aplicar un fondo de color en una página:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ejemplo de fondo de color en HTML</title>
<style>
body {
background-color: #FF5733;
color: white;
font-family: Arial, sans-serif;
}

.contenido {
background-color: rgba(0,0,0,0.7);
padding: 20px;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="contenido">
<h1>Bienvenido a mi sitio web</h1>
<p>Este es un ejemplo de cómo poner un fondo de color en HTML.</p>
</div>
</body>
</html>

Este código crea una página con un fondo de color naranja y un bloque de contenido semitransparente para mejorar la legibilidad. Así queda el resultado:

cómo poner un fondo de color en HTML: ejemplo

Ahora sabes cómo poner fondo de color en HTML. Puedes seguir practicando y perfeccionando tus habilidades en diseño web con el bootcamp de programación web que Keepcoding ha creado para ti, en el cual adquirirás todos los elementos necesarios que te servirán para conseguir tu primer gran empleo en el mercado tech y obtener grandes remuneraciones económicas. ¡No esperes más para cumplir tu sueño!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado