Como alterar Fundos de repetição nas Sites CSS3

Há situações em que você só quer uma única cópia de uma imagem de fundo em seu site CSS3. Pode ser que a imagem que usei é algo que não se repete bem ou é grande o suficiente para que você realmente não quer que ele repetiu. O procedimento a seguir demonstra uma técnica que você pode usar para dizer ao navegador para utilizar apenas uma cópia de uma imagem de fundo.

1. Abra o BackgroundPosition.CSS Arquivo.

2. Modificar o estilo de corpo de modo que a imagem não se repetir, como mostrado aqui.

   body {background-image: url ( "CuteCat.jpg") - background-color: SaddleBrown-color: SeaGreen-font-size: x-large-text-shadow: 1px 1px-background-position Amarelo: Centro-background-attachment : fixo-background-repeat: no-repeat-background-size: 80% -}

   A propriedade background-repeat está definido para no-repeat para que o navegador sabe para exibir apenas uma cópia. Porque há apenas uma cópia e a imagem pode não ser o tamanho certo para fornecer uma boa apresentação quando o usuário redimensionar o navegador, você também deve definir a propriedade background-size para redimensionar a imagem automaticamente.

3. Salve o arquivo CSS como NoRepeat.CSS.

4. Abra o arquivo BackgroundPosition.HTML.

5. modificar o tag para que ele se parece com isso:

6. Salve o arquivo HTML como NoRepeat.HTML.

7. Carregar a página NoRepeat.

   Você vê ao fundo. Há apenas uma imagem no centro agora - e quando você redimensionar o navegador, a imagem redimensiona automaticamente também.