O documento discute as propriedades do background em CSS, incluindo cor, imagem, repetição, anexo e posição. É explicado que o background pode ser aplicado a qualquer elemento da caixa e herdado por transparência, não herança. As principais propriedades discutidas incluem background-color, background-image, background-repeat, background-attachment e background-position.
2. Background - CSS
Background: efeito que pode ser adicionado a qualquer box-model do html
Lembre-se box-model é aquela caixa que envolve os elementos e nele
podemos aplicar cores, imagens de fundo, bordas... Essa propriedade
(background) deve receber um valor, do contrário ela é transparente, pois ela
´não é herdada.
3. Background - CSS
Um elemento filho herda atributos do elemento pai, mas no background
isso não acontece, mas sim por transparência. No exemplo temos uma
div (veja código) dentro do corpo html, se tivéssemos qualquer cor de
corpo, a div também teria a mesma cor, mas não por herança e sim
porque estaríamos vendo a propriedade default do elemento é
transparente.
4. Background - CSS
Então para estilizar o background usamos:
rgb(10%,2%,50%)
Color
Image
Repeat
Attachment
Position
- background-color: blue; ou :#6699FF ou rgb(0,90,125)
5. Background - CSS
Então para estilizar o background usamos:
Color
Image: define uma imagem de fundo dentro de uma url().
background-image:url()
Diretório
Repeat
Attachment
Position
img dentro de css, somente para as imagens do css.
6. Background - CSS
Então para estilizar o background usamos:
Color
Image
Repeat:
background-repeat:no-repeat;
background-repeat:repeat-y;
background-repeat:repeat-x;
Attachment
Position
7. Background - CSS
Então para estilizar o background usamos:
Color
Image
Repeat
Attachment: para usar essa propriedade adicionamos ao corpo a mesma
imagem
background-attachment:fixed;
background-attachment:scroll;
Veja
o resultado ....
Position
8. Background - CSS
Então para estilizar o background usamos:
Color
Image
Repeat
Attachment
Position: para visualizar melhor colocamos a propriedade
background-repeat:no-repeat;
Remover
e
background-attachment:fixed;
Valores:
Left,
Top,
center, right;
center, bottom;
Mesclamos:
Posicionar
Até
left top, right center, center center...
em pixels: background-position: 80px 120px; Em porcentagem: 50% 30%
valores negativos: -30px -30px;
9. Background - CSS
Estilizar o background no formato abreviado:
Background color image repeat attachment position.
Ex: