Fundos HTML: como personalizar o fundo das suas páginas web
Os fundos HTML podem ser definidos através de valores de cor ou com um ficheiro de imagem. Com o fundo adequado, não só irá melhorar o design da página web, como também irá garantir a legibilidade do conteúdo.
O que são fundos HTML?
A superfície por trás do conteúdo de uma página web é conhecida como fundo HTML. Estes fundos podem ser definidos durante a criação de uma página em HTML e também modificados posteriormente. Por predefinição, os fundos HTML são totalmente brancos. Alterá-los não só é recomendável para melhorar o design da página, mas também para garantir uma melhor visibilidade do conteúdo.
O que pode ser usado como fundo HTML?
Existem duas opções diferentes de fundo em HTML:
- Um valor de cor
- Uma imagem ou um gradiente de cor
Os valores são definidos através do atributo HTML style. Mostramos-lhe ambas as opções.
Definir fundos HTML com um valor de cor
Para alterar a cor dos fundos HTML, utilize o atributo style e a propriedade background-color ou bgcolor. Para especificar o valor da cor, tem três opções:
- Nome da cor: pode especificar a cor desejada utilizando o seu nome em inglês. Além de valores padrão como
red,yellowougreen, também são possíveis cores especiais comolightblueoudeepskyblue. Não importa se utiliza letras maiúsculas ou minúsculas ao especificá-la. - Código de cor hexadecimal: também pode indicar cores utilizando o seu código hexadecimal de seis dígitos. Este consiste em três pares de dígitos que vão de
0a9e das letrasaaf. O primeiro par representa o valor do vermelho, o segundo o valor do verde e o terceiro o valor do azul, onde a combinação 00 é o valor mais baixo e ff é o mais alto. Assim, o azul seria0000ff. - Valor RGB: alternativamente, pode usar o valor RGB, que também é a base para o código hexadecimal. Os valores vão de
0a255e referem-se novamente às cores vermelho, verde e azul. O azul, portanto, seria RGB (0, 0, 255).
A sintaxe para definir a cor desejada para os seus fundos HTML é a seguinte:
<body style="background-color: valor;">No exemplo a seguir, usamos um código hexadecimal para definir um azul claro como cor de fundo:
<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>O resultado será o seguinte:
Se desejar, também pode definir cores para fundos HTML em secções específicas das suas páginas web. Para isso, também se utiliza o atributo style e a propriedade background-color. A seguir, mostramos um exemplo de como definir cores diferentes para o fundo geral, bem como para os fundos dos títulos (<h2>) e parágrafos (<p>):
<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 imagens como fundo HTML
Para utilizar imagens ou gráficos como fundos HTML, eles devem estar guardados nos formatos de imagem JPG, PNG, SVG, WebP ou GIF. No exemplo a seguir, pode ver o código adequado para incorporar uma imagem como fundo, onde o caminho para a imagem deve ser ajustado individualmente:
<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>Ao utilizar uma imagem, é importante ter em conta a legibilidade do conteúdo. É possível ajustar a posição da imagem ou gráfico a qualquer momento, adicionando mais parâmetros.