HTML - fundos

Por padrão, o fundo da sua página da web é branco. Você pode não gostar, mas não se preocupe. O HTML oferece duas boas maneiras de decorar o fundo da sua página da web.

Fundo HTML com Cores
Fundo HTML com imagens

Agora vamos ver as duas abordagens, uma a uma, usando exemplos apropriados.

Fundo Html com Cores

o bgcolor atributo é usado para controlar o plano de fundo de um elemento HTML, especificamente o corpo da página e planos de fundo da tabela.

Note- O atributo bgcolor obsoleto em HTML5. Não use este atributo.

A seguir está a sintaxe para usar o atributo bgcolor com qualquer tag HTML.

<tagname bgcolor = "color_value"...>

Este color_value pode ser fornecido em qualquer um dos seguintes formatos -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Exemplo

Aqui estão os exemplos para definir o plano de fundo de uma tag HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Fundo Html com Imagens

o backgroundO atributo também pode ser usado para controlar o plano de fundo de um elemento HTML, especificamente o corpo da página e os planos de fundo da tabela. Você pode especificar uma imagem para definir o plano de fundo de sua página ou tabela HTML.

Note- O atributo background está obsoleto em HTML5. Não use este atributo.

A seguir está a sintaxe para usar o atributo background com qualquer tag HTML.

Note- O atributo background está obsoleto e é recomendado o uso da folha de estilo para configuração de background.

<tagname background = "Image URL"...>

Os formatos de imagem usados com mais frequência são imagens JPEG, GIF e PNG.

Exemplo

Aqui estão os exemplos para definir imagens de fundo de uma mesa.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

Fundos padronizados e transparentes

Você pode ter visto muitos padrões ou planos de fundo transparentes em vários sites. Isso pode ser feito simplesmente usando uma imagem padronizada ou uma imagem transparente no fundo.

É sugerido que ao criar padrões ou imagens GIF ou PNG transparentes, use as menores dimensões possíveis, mesmo tão pequenas quanto 1x1, para evitar carregamento lento.

Exemplo

Aqui estão os exemplos para definir o padrão de fundo de uma mesa -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

Isso produzirá o seguinte resultado -

↰ Previous page Next page ↱