aula 16 e 17. background

10
Background CSS - Style Sheet Professor: Jolvani Aula 16 e 17

Upload: jolvani-morgan

Post on 25-Jul-2015

37 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: Aula 16 e 17. background

BackgroundCSS - Style Sheet

Professor: Jolvani

Aula 16 e 17

Page 2: Aula 16 e 17. background

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.

Page 3: Aula 16 e 17. background

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.

Page 4: Aula 16 e 17. background

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

Page 5: Aula 16 e 17. background

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

Page 6: Aula 16 e 17. background

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

Page 7: Aula 16 e 17. background

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

Page 8: Aula 16 e 17. background

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;

Page 9: Aula 16 e 17. background

Background - CSS Estilizar o background no formato abreviado:

Background color image repeat attachment position. Ex:

Page 10: Aula 16 e 17. background

Próxima Aula: Estilização de Cabeçalhos