Background
CSS - Style Sheet
Professor: Jolvani
Aula 16 e 17
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.
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.
Background - CSS
 Então para estilizar o background usamos:
rgb(10%,2%,50%)
 Color - background-color: blue; ou :#6699FF ou rgb(0,90,125)
 Image
 Repeat
 Attachment
 Position
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 img dentro de css, somente para as imagens do css.
 Repeat
 Attachment
 Position
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
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
Background - CSS
 Então para estilizar o background usamos:
 Color
 Image
 Repeat
 Attachment
 Position: para visualizar melhor colocamos a propriedade
 background-repeat:no-repeat; e
 Remover background-attachment:fixed;
 Valores:
 Left, center, right;
 Top, center, bottom;
 Mesclamos: left top, right center, center center...
 Posicionar em pixels: background-position: 80px 120px; Em porcentagem: 50% 30%
 Até valores negativos: -30px -30px;
Background - CSS
 Estilizar o background no formato abreviado:
 Background color image repeat attachment position.
 Ex:
Próxima Aula: Estilização de Cabeçalhos

Aula 16 e 17. background

  • 1.
    Background CSS - StyleSheet Professor: Jolvani Aula 16 e 17
  • 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 - background-color: blue; ou :#6699FF ou rgb(0,90,125)  Image  Repeat  Attachment  Position
  • 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 img dentro de css, somente para as imagens do css.  Repeat  Attachment  Position
  • 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; e  Remover background-attachment:fixed;  Valores:  Left, center, right;  Top, center, bottom;  Mesclamos: left top, right center, center center...  Posicionar em pixels: background-position: 80px 120px; Em porcentagem: 50% 30%  Até valores negativos: -30px -30px;
  • 9.
    Background - CSS Estilizar o background no formato abreviado:  Background color image repeat attachment position.  Ex:
  • 10.