Código para background HTML e CSS

02:49Fresh Young´s

A propriedade background

A propriedade Background permite que você controle a cor do plano de fundo de um elemento, configure uma imagem como plano de fundo, e posicione uma imagem em uma página.
As principais propriedades de estilização de um plano de fundo são:
PropriedadeDescriçãoValores
backgroundPropriedade para configurar todas as propriedades do plano de fundo em uma declaraçãobackground-color, background-image, background-repeat background-attachment, background-position
background-attachmentEspecifica se uma imagem de plano de fundo é fixa ou rola com o resto da páginascroll, fixed
background-colorConfigura a cor do plano de fundo de um elemento.color-rgb, color-hex, color-name, transparent
background-imageConfigura uma imagem como plano de fundo.url, none
background-positionConfigura a posição inicial de uma imagem de plano de fundo.top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos.
background-repeatEstabelece se uma imagem de plano de fundo será repetida ou não.repeat, repeat-x, reapeat-y, no-repeat

No nosso exemplo, vamos escolher uma imagem aleatória e a usaremos como plano de fundo e aplicaremos todos os estilos nela.
Primeiro vamos criar o nosso documento HTML, bem simples só com uma div que será a div que irá receber a imagem.
Listagem 1: página HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
    <title>Propriedades de background em CSS - Linha de Código</title>
     <!-- Aqui chamamos o nosso arquivo css externo -->
    <link rel="stylesheet" type="text/css"  href="estilo.css" />
</head>
<body>
    <div id="teste">
    </div>
</body>
</html>
Agora vamos começar a aplicar os efeitos css. Background-color Primeiro vamos utilizar o background-color, para aplicar uma cor ao fundo do nosso site. Listagem 2: background-color
1
2
3
body{
    background-color: #082767;
}
Lembrando que as cores podem ser escolhidas pelo nome da cor em inglês, pela tabela de cores rgb e também pela tabela de cores hexadecimais.
Tendo a nossa cor de fundo definida, precisamos agora inserir a nossa imagem como plano de fundo da div, para isso vamos utilizar o background-image, como podemos ver a seguir:

Background-image

Nota: Vamos definir um tamanho de 400x de largura e 300px de altura para a nossa div para que possamos demonstrar os efeitos que queremos.
Listagem 3: background-image
1
2
3
4
5
#teste{
    width: 400px;
    height: 300px;
    background-image: url(logolc.png);
}
Até agora usamos duas propriedades de background, vamos ver como está ficando o nosso tutorial?
Exemplo de background color e image
Figura 1: Exemplo de background color e image
Por padrão os navegadores assumem algumas propriedades, como podemos ver na primeira imagem, ela está por padrão sendo repetida e com um posicionamento, mas com a ajuda das outras propriedades podemos manipular isso de uma forma bem simples e deixar a imagem exatamente como queremos.

Background-repeat

Vamos ver as diferentes variações de repetição da imagem. Vamos incluir mais três div’s em nosso documento HTML, com id’s diferentes e vamos aplicar o seguinte efeito css nelas:
Listagem 4: background-repeat
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
body{
    background-color: #082767;
}
#teste{
    width: 400px;
    height: 100px;
    background-image: url(logolc.png);
    background-repeat: repeat;
}
#teste1{
    width: 400px;
    height: 150px;
    background-image: url(logolc.png);
    background-repeat: repeat-x;
}
#teste2{
    width: 400px;
    height: 150px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
}
#teste3{
    width: 400px;
    height: 100px;
    background-image: url(logolc.png);
    background-repeat: repeat-y;
}
Na figura 2 poderemos ver o que acontece com a imagem em diferentes casos de repetição.
Usando o background-repeat
Figura 2: Usando o background-repeat
Agora vamos falar um pouco das outras propriedades:

Background-attachment

Essa propriedade é muito legal, pois ela é quem especifica se uma imagem de plano de fundo é fixa ou rola com o resto da página, muito utilizada quando queremos dar destaque em alguma imagem e queremos que ela se mantenha fixa na tela, por exemplo.
Ela possui dois valores, fixed e scroll, os quais definem se a imagem fica fixa na tela ou se vai rolar como o resto da página. Para usá-la é bem simples, veremos como realizar os dois.
Listagem 5: Exemplo de background-attachment
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#teste{
    width: 400px;
    height: 200px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}
#teste_1{
    width: 400px;
    height: 200px;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
}

background-position

Agora vamos falar do posicionamento do plano de fundo, para isso usamos a propriedade background-position. Existem diversas opções para definição do posicionamento do plano de fundo, na tabela no início desse tutorial vem dizendo quais são.
Essa é uma propriedade muito útil também, pois é com ela que conseguimos definir exatamente aonde a nossa imagem vai se posicionar dentro da nossa div, no exemplo a seguir, irei colocar uma borda na div para podermos ver mais facilmente os limites da div e assim vermos que o posicionamento da imagem está de acordo com o que definimos na propriedade.
Listagem 6: Exemplo de background-position
1
2
3
4
5
6
7
8
#teste{
    width: 400px;
    height: 200px;
    border: 1px solid;
    background-image: url(logolc.png);
    background-repeat: no-repeat;
    background-position: bottom right;
}
No código acima, definimos que o posicionamento da imagem será: bottom right, ou seja, a imagem ficará posicionada na parte inferior direita da div, como podemos ver na imagem a seguir.
Exemplo de posicionamento do plano de fundo
Figura 3: Exemplo de posicionamento do plano de fundo
Espero que todos tenham entendido como se trabalhar com as muitas variações de propriedades de background e fiquem a vontade em fazer suas perguntas e expor as dúvidas nos comentários, espero que tenham gostado e até o próximo tutorial.
Ricardo Arrigoni - Criação de sites


Fonte de: Linhhadecodigo

You Might Also Like

0 comentários

Popular Posts

Formulário de Contacto