Los fondos HTML pueden definirse mediante valores de color o con un archivo de imagen. Con el fondo adecuado, no solo mejorarás el diseño de la página web, sino que también garantizarás la legibilidad del contenido.

¿Qué son los HTML backgrounds?

La superficie detrás del contenido de una página web se conoce como fondo HTML. Estos fondos pueden definirse durante la creación de una página en HTML y también modificarse posteriormente. Por defecto, los fondos HTML son completamente blancos. Cambiarlo no solo es recomendable para mejorar el diseño de la página, sino para asegurar una mejor visibilidad del contenido.

Web Hosting
El hosting como nunca lo habías visto
  • Rápido, seguro, flexible y escalable
  • Seguro con SSL y protección DDoS
  • Dominio y asesor personal incluidos

¿Qué se puede utilizar como fondo HTML?

Existen dos opciones diferentes de fondo en HTML:

  • Un valor de color
  • Una imagen o un degradado de color

Los valores se establecen mediante el atributo HTML style. Te mostramos ambas opciones.

Consejo

En nuestro artículo sobre el tema, puedes obtener información sobre las posibilidades de HTML style.

Definir fondos HTML con un valor de color

Para cambiar el color de los fondos HTML, utiliza el atributo style y la propiedad background-color o bgcolor. Para especificar el valor del color, tienes tres opciones:

  • Nombre del color: puedes especificar el color deseado utilizando su nombre en inglés. Además de valores estándar como red, yellow o green, también son posibles colores especiales como lightblue o deepskyblue. No importa si usas mayúsculas o minúsculas al especificarlo.
  • Código de color hexadecimal: también puedes indicar colores utilizando su código hexadecimal de seis dígitos. Este consiste en tres pares de dígitos que van del 0 al 9 y de las letras a a f. El primer par representa el valor de rojo, el segundo el valor de verde y el tercero el valor de azul, donde la combinación 00 es el valor más bajo y ff es el más alto. Así, el azul sería 0000ff.
  • Valor RGB: alternativamente, puedes usar el valor RGB, que también es la base para el código hexadecimal. Los valores van de 0 a 255 y nuevamente se refieren a los colores rojo, verde y azul. El azul, por lo tanto, sería RGB (0, 0, 255).

La sintaxis para establecer el color deseado para tus fondos HTML es la siguiente:

<body style="background-color: valor;">
html

En el siguiente ejemplo, usamos un código hexadecimal para definir un azul claro como color de fondo:

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<title>Ejemplo de fondo</title> 
</head> 
<body> 
<div style="background-color: #BFEFFF;"> 
<h1>Este es tu título principal</h1> 
<p> 
Aquí está el contenido de tu página web. 
</p> 
</div> 
</body> 
</html>
html

El resultado se verá de la siguiente manera:

Imagen: Fondo HTML: ejemplo de color
Ejemplo de fondo HTML basado en el código hexadecimal “#BFEFFF”

Si lo deseas, también puedes definir colores para fondos HTML en secciones específicas de tus páginas web. Para ello, también se utiliza el atributo style y la propiedad background-color. A continuación, te mostramos un ejemplo de cómo definir diferentes colores para el fondo general, así como para los fondos de títulos (<h2>) y párrafos (<p>):

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<title>Ejemplo de fondo</title> 
<style> 
body {background-color: #BFEFFF;} 
h2 {background-color: #1E90FF;} 
p {background-color: #00CED1;} 
</style> 
</head> 
<body> 
<h2>El fondo de este título tiene el valor de color DodgerBlue.</h2> 
<p>Este fondo tiene el valor de color DarkTurquoise.</p> 
</body> 
</html>
html
Imagen: Ejemplo: tres fondos de color HTML diferentes
Ejemplo de fondo HTML con tres colores diferentes

Definir imágenes como fondo HTML

Para utilizar imágenes o gráficos como fondos HTML, deben estar guardados en los formatos de imagen JPG, PNG, SVG, WebP o GIF. En el siguiente ejemplo, puedes ver el código adecuado para incorporar una imagen como fondo, donde la ruta a la imagen debe ajustarse de forma individual:

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<title>Ejemplo de fondo</title> 
<style> 
body { background-image: url('/usuario/carpeta/assets/fondo/img/bild.svg'); background-size: cover;} 
</style> 
</head> 
<body> 
<div style="background-color: rgba(255, 255, 255, 0.8);"> 
<h1>Este es tu título principal</h1> 
<p> 
Aquí está el contenido de tu página web. 
</p> 
</div> 
</body> 
</html>
html

Al utilizar una imagen, es importante tener en cuenta la legibilidad del contenido. Es posible ajustar la posición de la imagen o gráfico en cualquier momento añadiendo más parámetros.

Compra y registra tu dominio ideal
  • Certificado SSL Wildcard
  • Registro privado
  • 1 cuenta de correo electrónico por contrato
¿Le ha resultado útil este artículo?
Ir al menú principal