Como usar duas cores como plano de fundo em um site

A cor de fundo de uma página da Web sem qualquer personalização é branca. A linguagem de programação HTML da Web permite que você altere a cor do plano de fundo e adicione uma imagem de plano de fundo. Você pode usar uma imagem para exibir um plano de fundo que apresenta várias cores. Use uma imagem existente que exiba as duas cores desejadas, como aquelas no logotipo de sua empresa, ou crie uma usando um editor de gráficos. Você pode criar o plano de fundo de duas cores para sua página da Web usando uma imagem horizontal fina repetida. Use folhas de estilo em cascata para fazer as alterações em todo o site.

1

Abra um editor de HTML ou de texto para criar a folha de estilos externa que conterá seu estilo de plano de fundo CSS.

2

Digite uma definição de estilo para o plano de fundo na tag body. As definições de estilo assumem a forma de "tag {}", portanto, uma definição para a tag body seria "body {}". O CSS fornece vários parâmetros que permitem definir seu estilo. A propriedade "background-image" permite que você indique uma imagem para seu plano de fundo. Inclua um link para a imagem no parâmetro "url". Por exemplo, o código pode ser assim:

corpo {background-image: url (images / 2colors.jpg); }

3

Digite um valor que instrua o fundo a repetir verticalmente - "repeat-y" - ou horizontalmente - "repeat-x" - usando a propriedade "background-repeat". Essa propriedade permite que você defina parâmetros para personalizar a maneira como sua imagem será repetida. O estilo do corpo será semelhante a este:

corpo {background-image: url (images / 2colors.jpg); background-repeat: repeat-y; }

4

Salve o arquivo usando uma extensão “.css”, por exemplo, pagestyles.css.

5

Abra uma página da Web à qual você deseja aplicar o estilo de plano de fundo. Links para documentos externos são definidos dentro do conjunto de tags “” da sua página da Web. Localize a tag “” e insira o seguinte texto acima para fornecer acesso à folha de estilo:

6

Repita a codificação do link em cada página do seu site que você deseja usar o fundo da imagem. Teste o resultado de suas alterações carregando a página em um navegador da Web.

Publicações Populares