Cómo poner un color de fondo en HTML

Para establecer un color de fondo en HTML para tu sitio web debes tener en consideración algunos aspectos importantes como la legibilidad y tu imagen de marca. Además, los contrastes que tenga le darán mayor atractivo a tu sitio y la navegación será mucho más sencilla. De igual forma, te ayudará a resaltar elementos que necesitas que tus usuarios vean, por ejemplo: llamadas a la acción, imágenes o un texto destacado.

Anteriormente, para cambiar color de fondo en HTML podías usar simplemente el atributo de color de fondo. Si querías cambiar el color de fondo de una página web a granate, por ejemplo, tan solo tenías que agregar el atributo bgcolor en la etiqueta del cuerpo de apertura y configurarlo con el código de color hexadecimal #80000. Te lo mostramos a continuación.

Aun así, este atributo ha quedado obsoleto en la última versión de HTML y se ha reemplazado por una alternativa mucho mejor. Esta es la propiedad de color de fondo de CSS. Con ella puedes agregar y cambiar colores de fondo en tu sitio web. Lo explicamos a detalle a lo largo de este contenido.

Para agregar color de fondo en HTML usa la propiedad de color de fondo de CSS. Configúralo con el nombre o código de color que desees y colócalo dentro de un atributo de estilo. Luego agrega este atributo de estilo a un elemento HTML, como una tabla, encabezado, div o etiqueta span.

Poner un color de fondo puede ayudar a que cierto elemento se destaque en la página, haciéndolo más fácil de leer.

A continuación, analizaremos este proceso paso a paso. Para este tutorial vamos a crear una tabla en HTML como ejemplo.

1. Identifica el elemento HTML al que te gustaría agregar un fondo o crear uno

Escanea tu código HTML para identificar qué elemento te gustaría cambiar. Si es el encabezado, busca la etiqueta de apertura <header>. Si es un div, busca la etiqueta <div>.

En este ejemplo estamos creando una tabla con la etiqueta <table>.

2. Elige un color de fondo HTML

Tienes muchos códigos de color HTML para elegir. Para este ejemplo crearemos el color #33475b.

3. Agrega un atributo de estilo a la etiqueta de apertura

A continuación, agrega el atributo de estilo a la etiqueta de apertura de tu elemento. Para este tutorial solo cambiarás el color de fondo de esta tabla específica. El cambio no afectará a ningún otro elemento de la página.

Aquí está el HTML con CSS en línea:

<table style="background-color:#33475b"><tr><th>Name</th><th>Job Title</th><th>Email address</th></tr><tr><td>Anna Fitzgerald</td><td>Staff Writer</td><td>example@company.com</td></tr><tr><td>John Smith</td><td>Marketing Manager</td><td>example2@company.com</td></tr><tr><td>Zendaya Grace</td><td>CEO</td><td>example2@company.com</td></tr></table>

Así de simple. Ahora descubre qué hacer si deseas establecer el color de fondo de varios elementos en una página.

Supongamos que estableces el color de fondo de toda tu página web en un color y a la vez deseas cambiar el color de fondo de un elemento específico. La buena noticia es que el proceso para hacerlo es casi idéntico al de agregarlo.

Puedes usar CSS en línea para hacer esto, pero en esta ocasión utilizaremos varios estilos de CSS en el siguiente ejemplo. Repasemos esto paso a paso.

1. Busca el selector de CSS cuerpo

En lugar de agregar este CSS en la etiqueta del cuerpo del archivo HTML, lo añadirás usando el selector de CSS del cuerpo. Encuéntralo en el código CSS de tu sitio web.

2. Cambia el color de fondo del cuerpo

A continuación, cambia el color de fondo de toda la página web mediante la propiedad background-color.

Aquí está el CSS:

Body {Background – color : #DBF9FC;}

Este es el resultado: 

Si este fuera el único CSS, entonces todo elemento en la página tendría el mismo fondo azul claro. A continuación, pondremos CSS en línea para cambiar el color de fondo de la tabla.

3. Agrega CSS en línea para cambiar el color de fondo de elementos específicos

Si quieres cambiar el color de fondo de la tabla, puedes usar CSS en línea para apuntar a ese único elemento.

Aquí está la etiqueta de apertura con CSS en línea:

<table style=”background-color:#33475b”>

Aquí el resultado: 

Cómo cambiar un color de fondo con div

Un div es un elemento contenedor que se usa comúnmente para designar diferentes secciones de una página web.

Cambiar el color de fondo de un div es idéntico a cambiar el color de fondo del cuerpo de tu página web.

Por lo general, una página web tendrá muchos div. En este tutorial te enseñaremos cómo cambiar solo un div. A continuación, te diremos el paso a paso.

1. Agrega una clase CSS al div que deseas cambiar

Primero, busca el div en tu código HTML y agrega una clase a la etiqueta de apertura. Añadir una clase a un elemento te permitirá cambiar ese elemento únicamente.

Así es como se ve:

<div class=”example”>Este es un div en una página web.</div>

2. Agrega el nuevo selector de clases a tu código CSS

A continuación, dirígete a tu código CSS y añade tu nuevo selector de clases. Entre corchetes incluye la propiedad background-color.

Así es como luce:

.example {background-color: ; }

3. Elige un nuevo color de fondo

Una vez hecho el paso anterior, elige un color de fondo CSS para tu propiedad de color de fondo. En este ejemplo utilizamos rgb (255, 122, 89).

Así es como se ve ese código:

.example { background-color: rgb (255, 122 89) ; }

Este es el resultado: 

¡Todo listo! Has logrado cambiar el fondo de un div en tu página web.

Cómo poner transparencia a tu color de fondo HTML

Al cambiar el color de fondo en HTML no estás limitado a colores sólidos. Puedes cambiar la opacidad y la transparencia para crear efectos visuales interesantes.

Para hacerlo debes usar la propiedad de opacidad en CSS.

¿Qué es la propiedad de opacidad de CSS?

La propiedad de opacidad CSS se agrega a un elemento HTML (como div o una tabla) o a un atributo CSS (como una clase) para hacer que esos elementos sean total o parcialmente transparentes. Los valores de esta propiedad van de 0 a 1, siendo 0 completamente transparente y 1 completamente opaco.

Para este tutorial usaremos dos botones como ejemplo. Te diremos el proceso paso a paso.

1. Identifica los elementos HTML que quieres hacer transparentes

Si ya sabes lo que deseas cambiar continúa y búscalo en tu código HTML.

En este ejemplo tenemos dos botones de Boostrap uno al lado del otro y lo que queremos es que los visitantes hagan clic en uno: el botón de enviar. Y así, evitar que elijan el otro con la opción «No, gracias».

Aquí está el HTML:

<button class="btn" type="submit">Submit</button><button class="btn" type="submit">No thanks</button>

El objetivo es disminuir la opacidad de este último para que parezca desactivado y generar menos clics.

Para lograr este resultado usaremos la propiedad de opacidad de CSS después de agregar una clase al botón que cambiaremos.

2. Agrega una clase al elemento que te gustaría cambiar

A continuación, en tu propio ejemplo, asigna una clase de CSS adicional al segundo botón para distinguirlo del primero.

Añade la clase btn-secundary al botón que quieres restar importancia.

Así debe lucir:

<button class="btn" type="submit">Submit</button><button class="btn btn-secondary" type="submit">No thanks</button>

3. Añade el selector de clases a tu código CSS y aplica la propiedad de opacidad

Ahora que has creado una nueva clase, es hora de añadirla a tu código CSS.

Para hacer que el segundo botón sea transparente en un 40 %, utiliza el selector de clase .btn-secondary para aplicar la propiedad de opacidad. Luego, establece el nivel de opacidad en 0.4.

Aquí está el CSS:

.btn-secondary {opacity: 0.4;}

Este es el resultado: 

Es posible que hayas notado que no es necesario usar la propiedad de color de fondo de CSS porque utilizaste las clases de modificador predeterminadas de Bootstrap.

Cómo crear un degradado de color de fondo HTML

Para obtener aún más opciones de estilo, puedes crear un fondo degradado. Este es un tipo especial de imagen que generalmente muestra un color que cambia gradualmente a otro en una determinada dirección, como de arriba abajo, de izquierda a derecha o en diagonal.

Estos se conocen como gradientes lineales. Para crear un degradado lineal debes especificar al menos dos paradas de color.

Te compartimos cuatro ejemplos rápidos.

Cómo hacer un degradado lineal: de arriba abajo

Vamos a suponer que deseas que el color de fondo pase del blanco en la parte superior de la pantalla al naranja en la parte inferior.

Con el selector de CSS del cuerpo, aplicarás propiedades de estilo únicas al cuerpo de la página web. Así es como se ve de principio a fin.

• Paso 1: busca el selector del cuerpo en tu código CSS.
• Paso 2: es posible que tu cuerpo ya tenga una propiedad de color de fondo. Bórralo. En lugar de utilizar la propiedad background-color usarás la propiedad background-image.
• Paso 3: establece la propiedad en «degradado lineal» y especifica dos paradas de color entre paréntesis. Esta es la sintaxis:

body { background-image: linear-gradient(color, color); }

• Paso 4: a continuación, establecerás la altura del elemento HTML al 100 % para asegurarte de que esta imagen ocupe toda la pantalla.

Así luce completo el CSS: 

html {height: 100%;}body {background-image: linear-gradient(#FFFFFF, rgb(255, 122, 89));}

Aquí está el HTML (incluidas las etiquetas del cuerpo):

<body><h1>Linear Gradient</h1><p>This linear gradient starts as white at the top and transitions to orange at the bottom.</p></body>

Cómo hacer un degradado lineal: de izquierda a derecha

En el ejemplo pasado, como pudiste notar, no se hizo ninguna especificación de dirección. Eso se debe a que la posición predeterminada es de arriba abajo.

Si deseas determinar alguna otra, debes agregarla entre paréntesis antes de que se detenga el color.

Te compartimos el CSS del ejemplo anterior, pero reescrito con las indicaciones correspondientes.

html {height: 100%;}body {background-image: linear-gradient(to right, #FFFFFF, rgb(255, 122, 89));}

Aquí está el HTML: 

<body><h1>Linear Gradient</h1><p>This linear gradient starts as white at the left and transitions to orange at the right.</p></body>

Y este es el resultado: 

Degradado lineal: ángulo de 45°

Si quisieras que el degradado fuera en diagonal, entonces puedes usar las palabras clave «hacia abajo a la derecha», «hacia abajo a la izquierda», «hacia arriba a la izquierda». Si deseas tener más control sobre la dirección del degradado, entonces puedes utilizar ángulos en lugar de palabras.

Ten en cuenta que un valor de 0 grados equivale a la palabra clave «hacia arriba», 90 grados equivale «hacia la derecha» y 180 grados «hacia abajo».

Por ejemplo, en caso de que desearas que el degradado fuera a la parte superior derecha, podrías establecer la dirección en 45 grados.

Así quedaría el CSS:

html {height: 100%;}body {background-image: linear-gradient(45deg, #FFFFFF, rgb(255, 122, 89));}

Este es el HTML: 

<body><h1>Linear Gradient</h1><p>This linear gradient starts as white at the bottom left and transitions to orange at the top right.</p></body>

Este es el resultado: 

Degradado lineal: cruce de varios colores

Para crear un degradado lineal necesitas como mínimo dos cruces de colores. No hay un máximo, lo que significa que puedes usar tantos tonos como desees. Te mostramos un ejemplo con cuatro cruces de colores.

Este el CSS:

html {height: 100%;}body {background-image: linear-gradient(to bottom right, #33475b, #0033CC, #FF77CC, rgb(255, 122, 89));}

Este es el HTML: 

<body><h1>Linear Gradient</h1><p>This linear gradient starts as dark blue at the top left and transitions from pink to orange at the bottom right.</p></body>

Aquí el resultado: 

5 ejemplos de páginas web con buenos colores de fondo 

Para ejemplificar mejor las diferentes formas en que puedes poner un color de fondo en HTML y veas cómo algunos contrastes ayudan a resaltar tu contenido, te mostramos algunas páginas que consideramos que han hecho un gran trabajo. 

1. Vogue

El sitio web de la revista Vogue (en cualquier país) mantiene un hermoso estilo editorial en donde el blanco y el negro dominan cada parte que veas. Esto, además de mantener la esencia de diseño editorial impreso, también permite que los usuarios se concentren en los elementos más importantes: ¡las imágenes! Al hablar de moda, tendencias, pasarelas y demás temas es vital que destaque lo visual para que el lector entienda de qué le hablan. 

Imagen de Vogue

2. Freelan Marketing 

Si quieres hacer uso de diferentes tonalidades del color que representa a tu marca, puedes hacerlo como el sitio web de la agencia de inbound marketing Freelan. Si exploras su sitio, todo está perfectamente equilibrado entre azules claros y oscuros. Es una estupenda elección para un color de fondo. 

Imagen de Freelan Marketing

3. Spotify

No todos los colores de fondo en una pagina web tienen que ser serios. Por ejemplo, Spotify hace uso de un color púrpura para resaltar las promociones vigentes de sus planes premium. Este tono lo equilibra y resalta con la imagen con colores similares y para el texto opta por un blanco que no compite con este atrevido color. 

Imagen de Spotify

4. Oxígeno Arquitectura 

Un color de fondo negro puede ser una decisión bastante arriesgada pero, de hacerla bien, puede lucir muy elegante y maduro. Este es el caso de esta firma de arquitectura que juega perfectamente con las imágenes y el blanco para que el fondo negro resalte a la perfección. 

Imagen de Oxígeno Arquitectura

5. Belmont Village

El sitio web de la casa de retiro para adultos mayores juega con un color de fondo verde y crema, los cuales forman parte de la identidad de su marca y es usado en sus redes sociales y demás canales de comunicación con sus clientes. Son colores tenues y muy acertados para el tipo de servicio que ofrecen. 

Imagen de Belmont Village

Preguntas frecuentes: cambio de color de fondo en HTML

¿Aún tienes dudas? Tenemos respuestas para ti.

¿Cómo se cambia el color de fondo del texto en HTML?

Puedes cambiar el color de fondo del texto en HTML agregando una propiedad de color de fondo a un elemento de párrafo (p) o encabezado (H1, H2, H3…).

Añade esta propiedad a través de CSS en línea o en el código CSS de tu sitio web.

¿Cuál es el color de fondo predeterminado en HTML?

Ninguno. El fondo es completamente transparente.

¿Cómo hago transparente un color de fondo?

Puedes hacer que un color de fondo sea total o parcialmente transparente utilizando un código de color RGBA para definir la propiedad background-color.

Así es como se ve en CSS:

background-color: rgba(255, 255, 255, 0);

El último valor determina la transparencia. Asegúrate de que esté configurado en 0 si deseas que el color sea completamente invisible.

¿Cómo elimino el color de fondo en HTML?

Puedes eliminarlo completamente estableciendo la propiedad background-color en «transparente».

Así es como se ve en CSS:

background-color: transparent;

Cambiar el color de fondo con un CMS

Al usar HTML y CSS puedes poner color de fondo a tu página web o diferentes elementos dentro de ella. Este color de fondo puede ser sólido, transparente o degradado, según el estilo que te guste. Este conocimiento básico de diseño web permitirte personalizar tu sitio web y hacer que tu contenido sea más legible y atractivo.

Aun así, el uso de código siempre puede resultar algo complejo, sobre todo para aquellas personas que no tienen muchos conocimientos ni experiencia en desarrollo web. Si quieres crear un sitio web completo de forma fácil e intuitiva, nuestro CMS gratuito puede ayudarte. Con él podrás:

• Personalizar los fondos de páginas web y todos sus elementos.
• Generar diseños atractivos para tus páginas web con funciones sencillas de «arrastrar y soltar».
• Personalizar la paleta de colores a los requerimientos de tu marca.
• Realizar cambios y pruebas sobre la marcha.
• Obtener un sitio web funcional y en menos tiempo, listo para hacer crecer tu negocio.

En definitiva, tendrás todas las opciones de diseño que tu empresa necesita, de la mano de decenas de herramientas de marketing que mejorarán tus páginas en línea.