SlideShare una empresa de Scribd logo
1 de 10
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

Más contenido relacionado

Destacado

Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaJolvani Morgan
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listasJolvani Morgan
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadasJolvani Morgan
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Jolvani Morgan
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesJolvani Morgan
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Jolvani Morgan
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificaçãoJolvani Morgan
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box modelJolvani Morgan
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5Jolvani Morgan
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosJolvani Morgan
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoJolvani Morgan
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryJolvani Morgan
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoJolvani Morgan
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeJolvani Morgan
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksJolvani Morgan
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Jolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 

Destacado (20)

Aula 09. efeito cascata e herança
Aula 09. efeito cascata e herançaAula 09. efeito cascata e herança
Aula 09. efeito cascata e herança
 
Aula 21. estilização de listas
Aula 21. estilização de listasAula 21. estilização de listas
Aula 21. estilização de listas
 
Aula 19 imagens mapeadas
Aula 19 imagens mapeadasAula 19 imagens mapeadas
Aula 19 imagens mapeadas
 
Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02Aula 06 e 07 elementos inline parte01 e 02
Aula 06 e 07 elementos inline parte01 e 02
 
Aula 04 e 05. seletores simples
Aula 04 e 05. seletores simplesAula 04 e 05. seletores simples
Aula 04 e 05. seletores simples
 
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
Aula 13, 14 e 15. textos (fontes, espaçamento, alinhamento e decoração)
 
Aula 31 certificação
Aula 31 certificaçãoAula 31 certificação
Aula 31 certificação
 
Aula 10 e 11. box model
Aula 10 e 11. box modelAula 10 e 11. box model
Aula 10 e 11. box model
 
Aula 28,29 e 30 w3 c, versões, html5
Aula 28,29 e 30   w3 c, versões, html5Aula 28,29 e 30   w3 c, versões, html5
Aula 28,29 e 30 w3 c, versões, html5
 
Aula 08 cores
Aula 08 coresAula 08 cores
Aula 08 cores
 
Aula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhosAula 18. estilização de cabeçalhos
Aula 18. estilização de cabeçalhos
 
Aula 20 div e spans
Aula 20 div e spansAula 20 div e spans
Aula 20 div e spans
 
Aula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamentoAula 24,25,26 e 27. posicionamento
Aula 24,25,26 e 27. posicionamento
 
Aula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j queryAula 22 e 23. menu drop down com j query
Aula 22 e 23. menu drop down com j query
 
Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamentoAula 34. bordas arredondadas e sombreamento
Aula 34. bordas arredondadas e sombreamento
 
Aula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidadeAula 25 e 26 formulário acessibilidade
Aula 25 e 26 formulário acessibilidade
 
Aula 19 e 20. estilização de links
Aula 19 e 20. estilização de linksAula 19 e 20. estilização de links
Aula 19 e 20. estilização de links
 
Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)Aula 28,29,30 e 31. layout (tableless)
Aula 28,29,30 e 31. layout (tableless)
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 

Más de Jolvani Morgan

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasJolvani Morgan
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresJolvani Morgan
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoJolvani Morgan
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingJolvani Morgan
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesJolvani Morgan
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chatJolvani Morgan
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internosJolvani Morgan
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativosJolvani Morgan
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introduçãoJolvani Morgan
 

Más de Jolvani Morgan (10)

Aula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativasAula 12. medidas absolutas e relativas
Aula 12. medidas absolutas e relativas
 
Aula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletoresAula 06, 07 e 08 seletores compostos e pseudo seletores
Aula 06, 07 e 08 seletores compostos e pseudo seletores
 
Aula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externoAula 03. utilização inline, incorporado e externo
Aula 03. utilização inline, incorporado e externo
 
Aula 02 sintaxe css
Aula 02 sintaxe cssAula 02 sintaxe css
Aula 02 sintaxe css
 
Aula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encodingAula 27 caracteres especiais & encoding
Aula 27 caracteres especiais & encoding
 
Aula 23 e 24 formulário controles
Aula 23 e 24 formulário controlesAula 23 e 24 formulário controles
Aula 23 e 24 formulário controles
 
Aula 18 links email, call, chat
Aula 18 links email, call, chatAula 18 links email, call, chat
Aula 18 links email, call, chat
 
Aula 17 links internos
Aula 17 links internosAula 17 links internos
Aula 17 links internos
 
Aula 16 links relativos
Aula 16 links relativosAula 16 links relativos
Aula 16 links relativos
 
Aula 15 links introdução
Aula 15 links introduçãoAula 15 links introdução
Aula 15 links introdução
 

Aula 16 e 17. background

  • 1. Background CSS - Style Sheet 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: