CSS parte 2 – As propriedades de background

“Máquina do Big Bang” vai parar durante dois meses
20/09/2008
[Animação] – Vida dura do processador
21/09/2008

CSS parte 2 – As propriedades de background

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
Philipe Cardoso
26 anos, Advogado, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuía formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia.

5 Comentários

  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. andre disse:

    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. juan disse:

    Andre,

    Isto é possível utilizando o PHP e o CSS juntos. Para que compreenda melhor, poderá baixar um exemplo que disponibilizei no seguinte endereço:

    http://www.zoomdigital.org/downloads/fundo_aleatorio.zip

  5. Paulo Henrique disse:

    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 uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *