CSS parte 2 – As propriedades de background | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

CSS parte 2 – As propriedades de background

Por Philipe Cardoso
Categoria: Tecnologia
set 20th, 2008
5 Comments
717 Views

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!

About "" Has 2042 Posts

23 anos, Carioca, Criador do Portal Zoom Digital, mantém desde a epoca que possuia formato de blog, Podcaster oficial do Zoom Cast. Amante por todo tipo de tecnologia e formado como técnico de informática.

5 Responses 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. 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 *