Background

CSS - Style SheetProfessor: 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 nelepodemos 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