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!
Juann..
SOh tenho a dizer que adorei esta aula
Muito boa mesmo
Realmente CSS é muito bom e suas aulas estão ajudando mt
Obrigado
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 ^^
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
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
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…)