Como Configurar Cores de Fundo em HTML

Baixe em PDF

Este artigo vai ensiná-lo a alterar a cor do plano de fundo de uma página web editando seu código HTML.

Método 1

Método 1 de 4:

Preparando a edição do código fonte HTML

Baixe em PDF

1
Determine a cor de plano de fundo que deseja utilizar. As cores HTML são ditadas por códigos com base em tons. É possível usar o selecionador de cor HTML "W3Schools" para encontrar a cor dos códigos que você deseja utilizar.
- Para fazê-lo, acesse o endereço https://www.w3schools.com/colors/colors_picker.asp em um navegador de internet.
- Clique na base da cor desejada na seção "Pick a Color" (Escolha uma cor).
- Selecione o tom desejado no lado direito da página.
- Anote o código numérico à direita do tom desejado.
2
Abra o arquivo HTML em um editor de texto. A partir do HTML5, o atributo HTML <bgcolor> não é mais suportado. A cor do plano de fundo, junto com outros aspectos de estilo da página, deve ser tratada usando linguagem CSS. ^{[1]XFonte de pesquisa}
- Você pode usar o "Notepad++" ou o "Bloco de notas" no Windows; no Mac, use o "TextEdit" ou o "BBEdit".
3
Adicione o cabeçalho "html" ao documento. Todas as informações de estilo da página (incluindo a cor do plano de fundo) devem ser inseridas entre as tags <style></style>:
```
<!DOCTYPE html><html><head><style></style> </head></html>
```
4
Crie uma linha em branco entre as tags "style". É preciso ter uma linha na qual seja possível adicionar informações abaixo da tag <style> e acima da tag </style>.

5

6
Adicione o elemento "body". Digite o seguinte código entre as tags <style></style>:
```
body { }
```
- Todos os ajustes feitos no elemento "body" em CSS terão efeito na página inteira.
- Pule este passo caso queira criar um gradiente.
Publicidade

Método 2

Método 2 de 4:

Definindo uma cor de fundo sólida

Baixe em PDF

Ele deverá estar no topo da página.
2
Adicione a propriedade "background-color" ao elemento "body". Para fazê-lo, digite background-color: entre os colchetes da tag "body". Em seguida, você deverá ter o seguinte elemento "body":
```
body {    background-color: }
```
- Nesse contexto, somente a ortografia do parâmetro "color" funcionará; não é possível usar "colour".
3
Adicione a cor de plano de fundo desejada na propriedade "background-color". Para fazê-lo, digite o código numérico da cor selecionada seguido de um ponto e vírgula ao lado do elemento "background-color:". Por exemplo, para usar a cor rosa, faça o seguinte:
```
body {    background-color: #d24dff;}
```
4
Reveja as informações da tag "style". Agora, o cabeçalho do seu documento HTML deverá estar mais ou menos assim:
```
<!DOCTYPE html><html><head><style>body {background-color: #d24dff}</style></head></html>
```
5
Use a propriedade "background-color" para aplicar cores de fundo a outros elementos. Assim como definido no elemento "body", você pode usar o "background-color" para definir cores de fundo de outros elementos, como cabeçalhos, parágrafos e assim por diante. Por exemplo, para aplicar uma cor de fundo a um cabeçalho principal (<h1>) ou um parágrafo (<p>) o código ficaria mais ou menos assim: ^{[2]XFonte de pesquisa}
```
<!DOCTYPE html><html><head><style>body {    background-color: #216fdb;}h1 {    background-color: #00b33c;}p {    background-color: #FFFFFF);}</style></head><body><h1>Cabeçalho com cor de fundo verde</h1><p>Parágrafo com cor de fundo branca</p></body></html>
```
Publicidade

Método 3

Método 3 de 4:

Criando um plano de fundo gradiente

Baixe em PDF

Ele deverá estar no topo da página.
2
Entenda a sintaxe básica desse processo. Para criar um gradiente, duas coisas são precisas: o ponto/ângulo inicial e as cores de transição entre eles. É possível selecionar múltiplas cores e fazer com que o gradiente mova entre elas, e você também pode definir uma direção ou ângulo para ele. ^{[3]XFonte de pesquisa}
```
background: linear-gradient(direction/angle, color1, color2, color3, etc.);
```
3
Crie um gradiente vertical. Se nenhuma direção for definida, o gradiente partirá de cima para baixo. Para criar um gradiente, adicione o seguinte código entre as tags <style></style>:
```
html {    min-height: 100%; }body {    background: -webkit-linear-gradient(#216fdb, #C9DCB9);     background: -o-linear-gradient(#216fdb, #C9DCB9);     background: -moz-linear-gradient(#216fdb, #C9DCB9);     background: linear-gradient(#216fdb, #C9DCB9);     background-color: #216fdb; }
```
- Cada navegador de internet possui uma implementação de função de gradiente diferente, então será preciso incluir diversas versões do código.
4
Crie um gradiente direcional. Caso queira criar um gradiente que não seja exclusivamente vertical, é possível adicionar a direção dele para alterar a forma como a mudança de cores acontecerá. Para fazê-lo, digite o seguinte código entre as tags <style></style>: ^{[4]XFonte de pesquisa}
```
html {    min-height: 100%;}body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);     background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }
```
- Você pode experimentar as tags "left" e "right" para testar diferentes direções para o gradiente.
5
Use outras propriedades para ajustar o gradiente; existe diversas outras opções disponíveis.
- Por exemplo, não apenas você pode adicionar mais do que duas cores, como também pode definir uma porcentagem após cada uma delas. Dessa forma, é possível escolher o espaçamento de cada segmento de cor existente. Veja um exemplo de gradiente usando esse princípio:
  background: linear-gradient(#93B874 10%, #C9DCB9 70%, #000000 90%);
- Adicione transparência às cores. Ao fazê-lo, a cor desaparecerá ao mudar para a próxima. Use a mesma cor para alterar dela para a transparência. Neste caso, será preciso usar a função rgba() para definir a cor. O valor final é o que determina a transparência: 0 para sólido e 1 para transparente.
  background: linear-gradient(to right, rgba(147,184,116,0), rgba(147,184,116,1));

How.com.vn Português: Step 6 Reveja o código final.

O código para criar gradientes como o plano de fundo do website ficará mais ou menos assim:

<!DOCTYPE html><html><head><style>html {    min-height: 100%;} body {    background: -webkit-linear-gradient(left, #216fdb, #C9DCB9);     background: -o-linear-gradient(right, #216fdb, #C9DCB9);    background: -moz-linear-gradient(right, #216fdb, #C9DCB9);     background: linear-gradient(to right, #216fdb, #C9DCB9);     background-color: #216fdb; }</style></head><body></body></html>

Método 4

Método 4 de 4:

Criando um plano de fundo dinâmico

Baixe em PDF

Ele deverá estar no topo da página.
2
Adicione a propriedade "animation" ao elemento "body". Digite o seguinte código abaixo da chave "body {" e acima da chave final: ^{[5]XFonte de pesquisa}
```
    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;
```
- A linha superior do texto é para o navegador Chrome, enquanto a linha inferior refere-se aos demais navegadores de internet.
3
Adicione as cores à animação. Agora, use a regra @keyframes para definir as cores de plano de fundo que farão parte do ciclo, bem como a duração de tempo de exibição de cada uma delas. Lembre-se de separar as entradas para diferentes conjuntos de navegadores de internet. Insira as seguintes linhas de código abaixo da chave final "body": ^{[6]XFonte de pesquisa}
```
@-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}
```
- Observe que as duas regras (@-webkit-keyframes e @keyframes possuem as mesmas cores do plano de fundo e porcentagens. Elas precisam permanecer uniformes para que a experiência seja a mesma em todos os navegadores de internet.
- As porcentagens (0%, 25%, etc) são do total da duração da animação (60s). Quando a página é carregada, o fundo terá a cor definida em 0% (#33FFF3). Ao atingir os 25% dos 60 segundos, o fundo mudará para #7821F, e assim por diante.
- É possível modificar o tempo e as cores de acordo com os resultados desejados.

How.com.vn Português: Step 4 Reveja o código.

Agora, o código todo de alteração de cor do plano de fundo deverá estar mais ou menos da seguinte forma:

<!DOCTYPE html><html><head><style>body {    -webkit-animation: colorchange 60s infinite;     animation: colorchange 60s infinite;}@-webkit-keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}@keyframes colorchange {     0%  {background: #33FFF3;}    25%  {background: #78281F;}    50%  {background: #117A65;}    75%  {background: #DC7633;}    100% {background: #9B59B6;}}   </style></head><body></body></html>

Dicas

Se quiser usar cores básicas no código HTML, digite o nome da cor sem o sinal # em vez de usar o código HTML da cor. Por exemplo, para criar um plano de fundo cor de laranja, digite background-color: orange;.
Você também pode definir uma imagem como plano de fundo usando HTML.