Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

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 Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

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. Campos obrigatórios são marcados com *