# 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. Dica No nosso artigo sobre o tema, pode obter informações sobre as possibilidades do estilo HTML. ### 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`, `yellow` ou `green`, também são possíveis cores especiais como `lightblue` ou `deepskyblue`. 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 `0` a `9` e das letras `a` a `f`. 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 seria `0000ff`. - **Valor RGB**: alternativamente, pode usar o valor RGB, que também é a base para o código hexadecimal. Os valores vão de `0` a `255` e 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: ```html ``` No exemplo a seguir, usamos um código hexadecimal para definir um azul claro como cor de fundo: ```html Ejemplo de fondo

Este es tu título principal

Aquí está el contenido de tu página web.

``` O resultado será o seguinte: [![Imagem: Fondo HTML: ejemplo de color](https://www.ionos.com/pt-pt/digitalguide/fileadmin/_processed_/a/d/csm_html-backgrounds-ejemplo-color-fondo_38b23e0cd6.webp "Fondo HTML: ejemplo de color")](https://www.ionos.com/pt-pt/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-backgrounds-ejemplo-color-fondo.png) Ejemplo de fondo HTML basado en el código hexadecimal “#BFEFFF” 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 (`

`) e parágrafos (`

`): ```html Ejemplo de fondo

El fondo de este título tiene el valor de color DodgerBlue.

Este fondo tiene el valor de color DarkTurquoise.

``` [![Imagem: Ejemplo: tres fondos de color HTML diferentes](https://www.ionos.com/pt-pt/digitalguide/fileadmin/_processed_/f/2/csm_html-backgrounds-ejemplo-tres-colores_e9dcad128c.webp "Ejemplo: tres fondos de color HTML diferentes")](https://www.ionos.com/pt-pt/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/html-backgrounds-ejemplo-tres-colores.png) Ejemplo de fondo HTML con tres colores diferentes ### 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 Ejemplo de fondo

Este es tu título principal

Aquí está el contenido de tu página web.

``` 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. This is a markdown version of: [https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/fundos-html/](https://www.ionos.com/pt-pt/digitalguide/paginas-web/desenvolvimento-web/fundos-html/) for AI/LLM consumption.