Philipe Cardoso 31 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a época que possuía formato de blog, Podcaster do Zoom Cast. Amante por todo tipo de tecnologia.

CSS parte 2 – As propriedades de background

1 min read

Bom pessoal, nesta segunda parte vou postar sobre as propriedades de background. Elas são utilizadas para personalização do fundo dos elementos. Ao total são 5:

– background-color
– background-image
– background-repeat
– background-attachment
– background-position

Abaixo exemplos da utilização de cada uma destas propriedades e os valores que podem ser atribuídos:

BACKGROUND-COLOR:

Pode ser utilizada para personalizar a cor de fundo do elemento. Os valores que lhe podem ser atribuídos são:

– Cores em código hexadecimal: #FFFFFF
– Cores em código RGB: rgb(255,235,0)
– Nome da cor: yellow, black, green, red e etc
– Transparente: transparent

Um exemplo de alteração da cor de fundo de um parágrafo:

Parágrafo com o fundo amarelo

Este efeito acima é resultado da seguinte folha de estilo:

p{
background-color: yellow;
}

BACKGROUND-IMAGE:

Possibilita inserir uma imagem de fundo no elemento. O único valor que lhe deve ser atribuído é a URL da imagem.

Sua sintaxe é:

body{
background-image: url(caminho/imagem.jpg);
}

BACKGROUND-REPEAT:

Define a maneira de repetição para o fundo. Os valores que lhe podem ser atribuídos são:

– no-repeat
– repeat
– repeat-y
– repeat-x

Ao utilizar “no-repeat”, a imagem de fundo aparece somente uma vez sem se repetir conforme a imagem abaixo:

Ao utilizar “repeat”, a imagem de fundo se repete por toda parte no elemento:

Ao utilizar “repeat-y”, a imagem de fundo se repetirá no eixo Y, ou seja, na vertical:

Ao utilizar “repeat-x”, a imagem de fundo se repetirá no eixo X, ou seja, na horizontal:

BACKGROUND-POSITION:

Define a forma de posicionamento da imagem no fundo do elemento. Os valores que lhe podem ser atribuídos são:

– top left (Posicionado no topo a esquerda)
– top center (Posicionado no topo e centralizado)
– top right (Posicionado no topo a direita)
– center center (Posicionado no centro)
– center left (Posicionado no centro a esquerda)
– center right (Posicionado no centro a direita)
– bottom left (Posicionado no fundo a esquerda)
– bottom center (Posicionado no fundo e centralizado)
– bottom right (Posicionado no fundo a direita)

BACKGROUND-ATTACHMENT:

Define o modo de comportamento da imagem de fundo. Os valores que lhe podem ser atribuídos são:

– fixed
– scroll

Ao definir “fixed”, a imagem de fundo ficará fixada na tela. O exemplo poderá ser visto neste site e também neste (reparem que ao “rolar” a página o fundo permance fixo).

Já com “scroll”, a imagem de fundo acompanhará a rolagem, como acontece na maioria dos sites. Exemplos: aqui e aqui.

Até a próxima!

Philipe Cardoso 31 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a época que possuía formato de blog, Podcaster do Zoom Cast. Amante por todo tipo de tecnologia.

5 Replies to “CSS parte 2 – As propriedades de background”

  1. Juann..

    SOh tenho a dizer que adorei esta aula
    Muito boa mesmo

    Realmente CSS é muito bom e suas aulas estão ajudando mt

    Obrigado

  2. Bom conteúdo. Olhei o blog no todo e, estou vendo que serve como um rápido curso de HTML, informatica e diversos assuntos. Ótimo blog. Enfim, mas não preciso os programas. Já utilizo todos, posso dizer que sou um GEEK ( T___T ) .

    Mas, possivelmente voltarei aqui para conferir as novidades e publicar seu blog

    Abraços
    Pulga

    http://pulgaandhisideas.wordpress.com/

    PS : Vou conferir os podcasts ^^

  3. A pergunta é: como criar um codigo que faça o (BACKGROUND-IMAGE:) se carregue de forma aleatória, tenho além da imagem principal em um (), mais outras 3 imagens que gostaria que fossem carregadas aleatoriamente quando carregada a pagina, o codigo pode ser em PHP, já quebrei a cabeça e todas as soluções que testavam davam erros e não obtive sucesso.
    obs.: a imagem é de fundo pois tenho um texto em cima da imagem em um outro DIV.
    Valeu

  4. Pode usar javascript tb para fazer isso… só que ai fica dependendo do navegador do cliente.

    Realmente a melhor solução é fazer com uma linguagem de servidor(ASP, PHP, JAVA, .NET, etc…)

Deixe um comentário

O seu endereço de e-mail não será publicado.