Minicursos - CSS

Propriedades de Background


Trabalhar com backgrounds em CSS é muito fácil e extremamente útil. Podemos aplicar esses fundos às páginas inteiras ou apenas em partes delas, usando elementos de divisão, como as divs.

A que escolhi para falar primeiro é também a mais básica, que é a backgound-color. Como o próprio nome sugere, com ela podemos definir uma cor sólida para ser exibida ao fundo. Vale lembrar que podemos utilizar essa propriedade em parágrafos, blocos de divisão, tabelas, etc.

Conforme dito no artigo sobre cores, essa propriedade aceita valores tanto em hexadecimal, quanto pelo nome da cor ou pelo código RGB.

Exemplo de utilização:

Body { backgound-color: red; }
p { backgound-color: #DAA520; }

Caso você queira utilizar uma imagem no lugar de uma cor sólida, pode fazer uso da propriedade backgound-image. Ela aceita arquivos nos formatos GIF, JPG e PNG como entrada.

Sua sintaxe também merece uma observação, vejam:

body {background-image:url('flores.jpg');}

É necessário acrescentar o código url antes de definir, entre parênteses, o nome do arquivo. Lembro que também é possível inserir imagens de fundo em tags específicas e não apenas na página toda. Até parágrafos aceitam imagens de fundo, o que abre um leque enorme de possibilidades de criação de layouts interessantes, por exemplo:

p
{
background-image:url('por-do-sol.jpg');
height:500px;
}


No entanto essas duas propriedades sozinhas podem não resolver os problemas. Vamos a um exemplo do seguinte código:

body {background-image:url('background.jpg');}

O arquivo background.jpg, que encontrei na rede e utilizarei nos exemplos, é esse:

Background CSS

Se o utilizarmos em uma página, teremos algo como:

Background CSS

Fica fácil perceber que não ficou bom, pois a imagem termina, mas começa a se repetir no canto direito da página. Para resolver esse problema existe um parâmetro que complementa o background-image, que é o background-repeat. Seus valores podem ser repeat-x, repeat-y e no-repeat.

Vejam as diferenças:

Utilizando o valor background-repeat:repeat-x;, a imagem se repete no eixo x, ou seja, horizontalmente. Se usarmos o background-repeat:repeat-y;, a repetição será no eixo y, portanto verticalmente. Por padrão, nos navegadores modernos as imagens de fundo já sofrem repetição tanto no eixo x quanto no y. Se nossa página de exemplo acima tivesse muito conteúdo, a imagem apareceria novamente abaixo, deixando o layout, nesse caso, mais estranho ainda. Para solucionar isso usamos outro valor para a propriedade background-repeat, que é a no-repeat. Ela exibirá a imagem uma única vez, independente da largura ou altura que a página tenha. É uma alternativa usada abundantemente nos sites atuais, pois permite que se coloque, por exemplo, uma imagem de fundo apenas abaixo de um menu de opções, no canto esquerdo da tela. Ou que se coloque imagens com efeitos de sombras ou combinações de cores em tags <divs>, criando efeitos muito interessantes. Vamos ver como ficaria a página acima com as seguintes instruções:

body
{
background-image:url('background.jpg');
background-repeat:no-repeat;
}


Background CSS

Reparem que a imagem de fundo não se repetiu, deixando a página com um visual mais interessante.

Background-Position

Caso alguma das sugestões que citei acima seja utilizada, ou seja, caso seja necessário colocar uma imagem de fundo em um menu ou dentro de algum parágrafo ou tabela, pode ser interessante alterar a posição inicial da imagem, ou seja, desloca-la em relação ao início da página. Utilizando os parâmetros descritos acima, o navegador posiciona a imagem a partir do ponto 0,0, conforme figura abaixo:

Background CSS

Para provocar esse deslocamento e posicionar a imagem fora do local padrão, que seria o ponto 0,0, faremos uso do background-position.
Vou provocar um deslocamento no eixo x, para que fique claro. Nosso seletor body agora está da seguinte forma:

body
{
background-image:url('background.jpg');
background-repeat:no-repeat;
background-position:200px 0px;
}


E isso gera a seguinte exibição:

Background CSS

Percebam que o fundo foi deslocado em 200px no eixo horizontal e não sofreu deslocamento no eixo vertical. Trata-se de uma propriedade muito interessante e que abre um leque enorme de possibilidades de criação de layouts para seu site!

Background-Attachment

Ainda sobre imagens de fundo, outro comando precisa ser citado, que é o background-attachment. Ele também permite um efeito interessante, que é o de “travar” a imagem de fundo, para que ela não se mova mesmo quando a barra de rolagem da página é movimentada.

Caso queiram testar, sua sintaxe é:

background-attachment:fixed;

Usando esta propriedade, ao rolar a página, os textos serão deslocados normalmente, mas a imagem de fundo permanecerá imóvel.
Com estas propriedades já é possível inserir e manipular os backgrounds. Espero que tudo tenha ficado claro. Na sequência falaremos sobre bordas.



Algumas notícias

O que acontece com o cérebro no exato momento em que morremos

O que passa em nossa cabeça no momento da morte? Não se sabe exatamente e, embora os cientistas tenham alguma resposta, a resposta continua sendo um grande mistério. Além de difícil solução, tentar respondê-la pode criar implicações éticas. No entanto, uma equipe de cientistas da Universidade...

Ler Notícia Completa

Operada e devolvida ao útero, menina que nasceu duas vezes hoje 'acorda sorrindo toda manhã'

Um bebê pode nascer duas vezes? Não é o caso da absoluta maioria das crianças, mas foi assim para a pequena Lynlee Boemer. Em outubro de 2015, sua mãe, Margaret Boemer, descobriu que estava grávida de gêmeos. Ela sofreu um aborto espontâneo, mas um dos bebês sobreviveu. Com dez semanas de ges...

Ler Notícia Completa

Médicos dizem estar perto de chegar a exame de sangue para todos os tipos de câncer

Cientistas dizem que estão mais perto de criar um exame de sangue universal, capaz de identificar todos os tipos de câncer. Estudo conduzido com 1.005 pacientes por uma equipe da Universidade Johns Hopkins, dos Estados Unidos, testou um método que detecta oito tipos de proteínas e 16 mutações ge...

Ler Notícia Completa

Formato JPEG está com os dias contados

Há quantos anos você ouve falar em arquivos JPG? O formato já era utilizado nos primórdios da web comercial nos anos 1990, vivendo há mais de 20 anos como o principal método de compressão de imagens do público. No que depender de Google, Mozilla e outras empresas, isso pode mudar dentro de algum...

Ler Notícia Completa

EUA aprovam 'droga viva', 1ª terapia contra câncer que reestrutura sistema imunológico do paciente

Os Estados Unidos aprovaram o primeiro tratamento que reestrutura o sistema imunológico do paciente para atacar o câncer. A agência reguladora de medicamentos do país - a FDA - diz que a decisão foi um momento "histórico" e que a medicina agora "entra em uma nova fronteira". A companhia Novar...

Ler Notícia Completa

Você sabia?

Desde o seu lançamento, em 1985, o fantástico jogo Tetris vende pelo menos 70 milhões de unidades por ano em todo o mundo! Os dados são oficiais e fornecidos pela THQ, uma das distribuidoras do título.

O mouse foi criado em 9 de dezembro de 1968, por um americano chamado Douglas Engelbart, que o batizou de "XY Position Indicator for a Display System". Conheça a história do mouse clicando aqui.

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

Você gostará destes vídeos: