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 contrrio ela transparente, pois ela no herdada.

Background - CSS

Um elemento filho herda atributos do elemento pai, mas no background

isso no acontece, mas sim por transparncia. No exemplo temos uma
div (veja cdigo) dentro do corpo html, se tivssemos qualquer cor de
corpo, a div tambm teria a mesma cor, mas no por herana e sim
porque estaramos vendo a propriedade default do elemento
transparente.

Background - CSS

Ento para estilizar o background usamos:

rgb(10%,2%,50%)

Color

Image

Repeat

Attachment

Position

- background-color: blue; ou :#6699FF ou rgb(0,90,125)

Background - CSS

Ento para estilizar o background usamos:

Color

Image: define uma imagem de fundo dentro de uma url().

background-image:url()

Diretrio

Repeat

Attachment

Position

img dentro de css, somente para as imagens do css.

Background - CSS

Ento para estilizar o background usamos:

Color

Image

Repeat:
background-repeat:no-repeat;
background-repeat:repeat-y;
background-repeat:repeat-x;

Attachment

Position

Background - CSS

Ento 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

Ento para estilizar o background usamos:

Color

Image

Repeat

Attachment

Position: para visualizar melhor colocamos a propriedade

background-repeat:no-repeat;
Remover

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;

Background - CSS

Estilizar o background no formato abreviado:

Background color image repeat attachment position.

Ex:

Prxima Aula: Estilizao de Cabealhos