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

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa

Novas câmeras 'debaixo da tela' da Oppo surpreendem

Para muitos, colocar uma câmera embaixo da tela de um celular era uma tarefa impensável, por conta de diversos problemas técnicos. Os primeiros testes da Oppo que se propuseram a isso geravam imagens de qualidade bastante insatisfatória, já que a captação da luz era prejudicada pela tela. A prim...

Ler Notícia Completa

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Você sabia?

O título Asteroids, do Atari, possui recorde de pontuação há 30 anos. Em 1982 um americano chamado Scott Safran atingiu a marca de 41.336.440. Atualmente ele faz parte de um minúsculo grupo de jogadores que conseguiram manter seus recordes por mais de 30 anos.

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.

O filme Mortal Kombat, inspirado no jogo de mesmo nome, faturou 23 milhões de dólares apenas no fim de semana de estreia nos EUA. Ainda sobre este título de sucesso, outra cifra que impressiona é o faturamento ao longo do primeiro ano: 1 bilhão de dólares no mundo todo.

Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!