A maneira mais simples, mais compatível para criar um fundo CSS3 que tem, pelo menos, um pouco mais atraente é a utilização de uma única imagem. A imagem da direita diz muito sobre o seu site e fornece a continuidade entre as páginas. Como essa abordagem é padrão, você vê-lo usado em um monte de sites. Tudo que você realmente precisa saber para usá-lo é a propriedade background-image, como mostrado no procedimento a seguir.

1. Criar um novo arquivo HTML5 com o seu editor de texto.

2. Digite o seguinte código para a página HTML.

   O gato bonito
   A página que tem um gato bonito como um fundo.

3. Salve o arquivo como SingleImage.HTML.

   A amostra será exibido em outros locais, de modo nomenclatura é importante.

4. Criar um novo arquivo CSS com o seu editor de texto.

5. Digite o seguinte informações de estilo CSS.

   body {background-image: url ( "CuteCat.jpg") - background-color: SaddleBrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px amarelo-}

   Esta é a forma mais simples de uma única imagem de fundo. A propriedade background-image tem uma função única url () associado a ele. Apenas no caso de o usuário não pode exibir a imagem (ou opta por não), você precisa definir uma cor de fundo adequado.

   Dependendo da imagem (o exemplo usa um que é particularmente difícil de trabalhar com quando se trata de texto), pode ser necessário para definir a cor eo tamanho do texto para tornar o conteúdo fácil de ler.

   Este é um lugar onde usando a propriedade text-shadow pode fazer a diferença entre a alegria de usuário e reclamações dos usuários. Use cores contrastantes para a fonte e sombra de modo que os dois trabalham juntos para tornar o conteúdo visível contra uma imagem com uma gama de cores.

6. Salve o arquivo como SingleImage.CSS.

   A amostra será exibido em outros locais, de modo nomenclatura é importante.

7. Carregar a página SingleImage.

   Você vê ao fundo. Note-se que o gráfico começa no canto superior esquerdo e repete automaticamente conforme necessário para encher toda a janela.