Fondos HTML: cómo personalizar el fondo de tus páginas web
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.
- 3x más rápido, ahora un 60 % de ahorro
- Alta disponibilidad >99.99 %
- Solo en IONOS: hasta 500 GB 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.
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,yellowogreen, también son posibles colores especiales comolightblueodeepskyblue. 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
0al9y de las letrasaaf. 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ía0000ff. - Valor RGB: alternativamente, puedes usar el valor RGB, que también es la base para el código hexadecimal. Los valores van de
0a255y 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;">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>El resultado se verá de la siguiente manera:
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>
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>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.
- Tu dominio protegido con Certificado SSL Wildcard gratis
- Función Domain Connect para una configuración DNS simplificada gratis
- Registro privado y gratis para mayor seguridad