# Background HTML: Como definir planos de fundo em sites Planos de fundo HTML podem ser definidos por valores de cor ou por um arquivo de imagem. Com o background HTML certo, você não só aprimora o design do site, como também garante a legibilidade do seu conteúdo. ## O que é background HTML? A parte de trás do conteúdo de uma página da web é chamada de plano de fundo ou background. Esses planos de fundo podem ser definidos durante a criação de uma página em HTML e alterados posteriormente. Por padrão, backgrounds HTML são completamente brancos. Alterá-los não só é recomendável para melhorar o design do site, mas também para destacar o conteúdo apresentado, tornando-o mais legível. ## O que pode ser usado como background HTML? Existem duas formas de criar planos de fundo HTML: - Com um valor de cor - A partir de uma imagem ou gradiente de cor Os valores são definidos pelo atributo HTML `style`. A seguir, ensinaremos o passo a passo de ambas as opções. Dica Neste nosso artigo especializado, você pode aprender mais sobre as possibilidades da tag HTML style. ## Definir planos de fundo HTML com valores de cor Para alterar a cor de planos de fundo HTML, utilize o atributo `style` e a propriedade `background-color` ou `bgcolor`. Para definir o valor da cor, você tem três opções diferentes: - **Nome da cor**: Você pode definir a cor desejada pelo nome em inglês. Além de valores padrão como *red*, *yellow* ou *green*, também existem cores especiais como *lightblue* ou *deepskyblue*. Maiúsculas e minúsculas não têm importância na definição. - **Código hexadecimal**: Você pode definir cores também usando o número hexadecimal correspondente, de seis dígitos. Ele é composto por três pares de dígitos, de 0 a 9 e de “a” a “f”. O primeiro par define o valor do vermelho, o segundo o valor do verde e o terceiro o valor do azul, sendo a combinação 00 o valor mais baixo e “ff” o mais alto. Azul, por exemplo, é 0000ff. - **Valor RGB**: Alternativamente, você pode usar o valor RGB, que também tem base no código hexadecimal. Seus valores variam de 0 a 255 e se referem às cores vermelho, verde e azul. Azul, por exemplo, é RGB (0, 0, 255). A sintaxe para definir uma cor de plano de fundo HTML é a seguinte: ```html ``` No exemplo abaixo, utilizamos um código hexadecimal para definir um azul claro como cor de fundo: ```html Exemplo de plano de fundo

Este é o seu título

Aqui estão os conteúdos do seu site.

``` O resultado seria o seguinte: [![Imagem: Exemplo de background HTML com cor](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/1/c/csm_background-html-cor-hexadecimal_96a68e57af.webp "Exemplo de background HTML com cor")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/background-html-cor-hexadecimal.png) Exemplo de plano de fundo HTML definido pelo código hexadecimal #BFEFFF. Se necessário, você pode definir cores para planos de fundo de áreas específicas das suas páginas. Para isso, também é utilizado o atributo `style` e a propriedade `background-color`. No exemplo abaixo definimos cores diferentes para o fundo geral, para os títulos `

` e para os parágrafos `

`: ```html Exemplo de plano de fundo

O fundo deste título tem a cor Azul Royal

Este fundo tem a cor Verde-Água.

``` [![Imagem: Background HTML com três diferentes cores](https://www.ionos.com/pt-br/digitalguide/fileadmin/_processed_/4/3/csm_background-html-tres-cores_0e26f663cc.webp "Background HTML com três diferentes cores")](https://www.ionos.com/pt-br/digitalguide/fileadmin/DigitalGuide/Screenshots_2024/background-html-tres-cores.png) Exemplo de plano de fundo HTML com três cores diferentes. ## Definir imagem de fundo HTML Para usar imagens ou gráficos como planos de fundo HTML, elas devem estar salvas nos formatos de imagem JPG, PNG, SVG, WebP ou GIF. No exemplo abaixo, você verá o código adequado para incorporar uma imagem como fundo. O caminho da imagem deve ser ajustado conforme necessário: ```html Exemplo de fundo

Este é o seu título

Aqui estão os conteúdos do seu site.

``` Ao usar uma imagem como plano de fundo HTML, lembre-se de sempre garantir a legibilidade do conteúdo. Você pode ajustar a posicionamento da imagem ou gráfico com parâmetros adicionais, para se certificar de que o texto permaneça legível. This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-backgrounds/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/html-backgrounds/) for AI/LLM consumption.