CSS Background - Aula 3

Usar uma cor ou uma imagem como plano de fundo de um site ou mesmo de um elemento HTML, é uma técnica que trás benefício, tanto para o designer quanto para o conteúdo.

Falando de designer, já estamos cansados de saber que uma imagem, bem feita e bem inserida, faz uma diferença enorme no layout, seja de um site, app, livro, revista ou qualquer outro projeto de mídia. Então, planejar imagens para o site é algo que você deve fazer com carinho.

Agora, porque inserir imagens como plano de fundo se os buscadores não conseguem entender, porque isso é bom para o conteúdo?

Exatamente porque eles (buscadores) não podem encontrá-las que é bom. Se você quiser inserir imagens por pura estética, ou seja, não tem relevância para o conteúdo da página, a melhor maneira é como plano de fundo. Assim, as informações da imagem não irão confundir os buscadores a respeito do conteúdo da página.

Claro que se for uma imagem ilustrativa e referente ao conteúdo, ela deve sim, ser inserida como imagem mesmo, seguindo todas as regras, já apresentadas aqui, para melhorar o SEO do site.

Mas se tratando de imagens decorativas, eu sugiro que as coloque como plano de fundo, e por falar nisso, vamos falar do que interessa, as propriedades CSS3 para tratar planos de fundo.

As propriedades CSS de plano de fundo são usadas para adicionar efeitos de fundo nos elementos. Então vamos começar do básico, uma cor sólida no fundo da página ou de um elemento HTML.

Mas antes, se você ainda não viu, sugiro que dê uma lida no capítulo "140 tons de HTML" onde eu falo dos tipos de cores, onde e como usá-las, as mesmas regras para o HTML servem para o CSS, praticamente.


CSS background-color

Essa propriedade especifica uma cor de fundo para os elementos ou para todo o documento HTML. Para isso, basta atribuir a cor desejada à propriedade background-color declarada dentro do seletor em que ela deve ser aplicada.

No CSS podemos usar os mesmos padrões de cores do HTML.

  • Nome da cor (em inglês) - "red";
  • Cor em Hexadecimal - "#ff0000";
  • Em RGB - "rgb(255,0,0)"

<!-- CÓDIGO NO CSS -->
body {
  background-color: lightblue;
}

Resultado


Título da pagina

Aqui é o conteúdo da página.

Veja esse capítulo 140 tons de HTML para saber como usar melhor as cores.

Outros elementos

Você pode usar a propriedade background-color em qualquer elemento HTML


<!-- CÓDIGO NO CSS -->
h1 {
  background-color: lightblue;
}

div {
  background-color: lightblue;
}

p {
  background-color: lightblue;
}

Opacidade/Transparência

A propriedade opacity específica a opacidade ou transparência de um elemento. Pode ser usado um valor entre 0 e 1. Quanto menor o valor, mais transparente será esse elemento.


<!-- CÓDIGO NO CSS -->
div {
 background-color: green;
 opacity: 0.3; 
}



Resultado


opacity: 1

opacity: 0.6

opacity: 0.3

opacity: 0.1

Se você não quiser aplicar transparência nos elementos filhos, como no exemplo acima, use cores RBGA.

Você estudou no capítulo 140 tons de HTML como usar as cores RGB. Nós podemos usar o padrão de cores RGB como um quarto parâmetro, o canal alpha (RGBA) e especificar a opacidade da cor.

A sintaxe da cor RGBA é assim, rgba(red, green, blue, alpha). O canal alpha é um valor entre 0 e 1 onde 0 é o mais transparente e 1 o mais opaco.


<!-- CÓDIGO NO CSS -->
div {
 background-color: rgba(0, 128,0,0.3);
}

Acesse o capítulo 140 tons de HTML para saber mais sobre padrões de cores RGBA.

A seguir veja um exemplo de opacidade aplicada somente na cor de fundo e não no texto.

Resultado


opacity: 1

opacity: 0.6

opacity: 0.3

opacity: 0.1

Os valores aceitos na propriedade background-color são:

  • cor: Que pode ser o nome da cor ou so valores em RGB, RGBA, HSL, HSLA, Hexadecimal e Hexadecimal com transparência;
  • transparent: É o valor padrão. Específica que o elemento deve ter uma cor de fundo transparente;
  • initial: Seta o valor como sendo o valor padrão inicial;
  • inherit: Específica que uma propriedade deve herdar seu valor do elemento pai.

Imagem de fundo

A propriedade background-image especifica uma imagem para o plano de fundo dos elementos.

Por padrão, a imagem é repetida por toda extensão do elemento e a posição inicial é no topo e na esquerda do elemento em que foi inserida.

A imagem inserida irá ocupar quase todo o elemento, espaçamentos e a bordar, mas não as margens.


<!-- CÓDIGO NO CSS -->
body {
  background-image: url("arvore.png");
}

Resultado


Resultado


Aqui vai um texto que pode não ser entendido por causa do plano de fundo.

Os valores da propriedade background-image são:

url O URL da imagem. Para especificar mais de uma imagem, separe os URLs com uma vírgula;
none Valor padrão. Diz que o elemento não deve ter uma imagem de fundo;
linear-gradiente()*: Define um gradiente linear como imagem de fundo. Defina pelo menos duas cores (de cima para baixo). Ex.: background-image: linear-gradient(green, yellow, blue);
radial-gradient()*: Define um gradiente radial como imagem de fundo. Defina pelo menos duas cores (centro para as bordas). Ex.: background-image: radial-gradient(green, yellow); A primeira cor será no centro e a última na extremidade;
repeating-linear-gradient()*: É usada para repetir gradientes lineares;
repeating-radial-gradient()*: É usada para repetir gradientes radiais;
initial: Seta o valor como sendo o valor padrão inicial;
inherit: Específica que uma propriedade deve herdar seu valor do elemento pai.

linear gradient
linear gradient para direita
Linear gradient diagonal
Linear com 3 cores
Varias cores
Radial gradient
background-image: radial-gradient(circle, red, yellow, green);

CSS - background-repeat

Como eu disse, por padrão, a imagem inserida como plano de fundo é repetida por todo o elemento, na horizontal e na vertical. Mas às vezes queremos que as imagens sejam repetidas apenas horizontalmente, verticalmente ou que não sejam repetidas. Para criar esse efeito, usamos a propriedade background-repeat seguido do valor que queremos.


<!-- CÓDIGO NO CSS -->
body {
  background-image: url(
);
  background-repeat: repeat-x;
}

Resultado


Existem outros valores para essa propriedade. Vejamos:
repeat: A imagem de fundo é repetida vertical e horizontalmente. A última imagem será cortada se não couber. Este é o padrão;
repeat-x: A imagem de fundo é repetida apenas horizontalmente;
repeat-y: A imagem de fundo é repetida apenas verticalmente;
no-repeat: A imagem só será mostrada uma vez. A imagem de fundo não se repete;
space: A imagem de fundo é repetida tanto quanto possível sem cortes. A primeira e a última são fixadas em ambos os lados do elemento, e os espaços em branco são distribuídos uniformemente entre as imagens;
round: A imagem de fundo é repetida e comprimida ou esticada para preencher o espaço (sem lacunas);
initial: Seta o valor como sendo o valor padrão inicial;
inherit: Específica que uma propriedade deve herdar seu valor do elemento pai.

CSS background-position

Com esta propriedade podemos definir a posição na qual a imagem será inserida, ou seja, sua posição inicial. background-position é relativa à posição de fundo na camada definida por background-origin, para cada background-image definido.

Essa posição pode ser especificada utilizando uma combinação de valores, sendo o primeiro a posição horizontal e o segundo a posição vertical.


<!-- CÓDIGO NO CSS -->
body {
   blue background-image blue :  blue url blue ("img_tree.png");
   blue background-repeat blue :  blue no-repeat blue ;
   blue background-position blue :  blue right top blue ;
}
Os valores aceitos por essa propriedade são:
left, right ou center (para primeira posição) top, center ou bottom (para segunda posição. Se você especificar somente uma posição, o outro valor será center; Se você especificar somente uma posição, o outro valor será center;
x% y%: Especifica a posição em porcentagem, sendo (0% 0%) o mesmo que (left top). Se você especificar apenas um valor, o segundo assumirá o valor de 50%;
xpos ypos: O primeiro valor é a posição horizontal e o segundo a vertical. (0 0) é o mesmo que (left top). Você pode usar as unidades de medidas do CSS (3px 20px). Se você informar apenas um valor, o outro será 50%. Você pode mesclar as unidades, (4px 20%);
initial: Seta o valor como sendo o valor padrão inicial;
inherit: Específica que uma propriedade deve herdar seu valor do elemento pai

CSS background-origin

A propriedade especifica a posição de origem (a área de posicionamento do plano de fundo) de uma imagem.

Esta propriedade não tem efeito se o background-attachment for "fixed".

Valores para usar com essa propriedade:
padding-box: Valor padrão. A imagem de fundo começa no canto superior esquerdo da borda de preenchimento;
border-box: A imagem de fundo começa no canto superior esquerdo da borda;
content-box: A imagem de fundo começa no canto superior esquerdo do conteúdo;
initial: Seta o valor como sendo o valor padrão inicial;
inherit: Específica que uma propriedade deve herdar seu valor do elemento pai.

CSS background-attachment

Especifica se a imagem de fundo deve rolar ou ficar fixa, nesse caso, não vai rolar junto com a página.


<!-- CÓDIGO NO CSS -->
body {
  background-image: url("img_tree.gif");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

<!-- CÓDIGO NO HTML -->
 <div 
="height:800px; background-color:yellow;">Este contêiner é o único que vai rolar (height = 800 pixels).</div>

Resultado


Este contêiner é o único que vai rolar (height = 800 pixels).
Valores usados nesta propriedade:
scroll A imagem de fundo vai rolar junto com a página. Esse é o valor padrão;
fixed Essa chave significa que o background é fixo em relação ao viewport. Mesmo que um elemento tenha um mecanismo de rolar, o background ‘fixed’ não movimenta com o elemento;
local Essa chave significa que o background é fixo em relação ao conteúdo do elemento: e se ele tem um mecanismo de rolar, o background rola com o conteúdo do elemento. A área pintada e o posicionamento do background são relativos à área de rolagem do elemento ao invés da borda de fronteira deles; initial: Seta o valor como sendo o valor padrão inicial;
initial: Seta o valor como sendo o valor padrão inicial;
inherit Específica que uma propriedade deve herdar seu valor do elemento pai.

CSS background-blend-mode

Quando usamos mais de uma imagem no plano de fundo podemos definir o modo de mesclagem de cada camada de fundo (cor e/ou imagem). Para quem usa programas de edição como Photoshop, Gimp e outros, sabe do que eu estou falando.

Cada valor para propriedade vai setar o modo de mesclagem com o padrão de seu próprio nome. Será mais fácil entender se você tem alguma experiência com edição de imagens. Os valores para essa propriedade são:

  • normal: Valor padrão. Seta o modo de mesclagem como normal;
  • multiply;
  • screen;
  • overlay;
  • darken;
  • lighten;
  • color-dodge;
  • saturation;
  • color;
  • luminosity.

Esses são efeitos pré-definidos às imagens e cores de fundo, atribuindo a elas mais ou menos luminosidade, saturação, brilho e as outras opções acima.


<!-- CÓDIGO NO CSS -->

 { 
  width: 400px;
  height: 400px;
  background-repeat: no-repeat, repeat;
  background-image: url("img_tree.gif"), url("bird.gif");
  background-blend-mode: multiply;
}

Resultado



CSS background-clip

Define até que ponto o plano de fundo (cor ou imagem) deve se estender em um elemento. Assim, podemos especificar que desejamos colorir apenas a borda, o padding ou o conteúdo.

Valores para essa propriedade:
border-box Valor padrão. O fundo vai se estender por de trás da borda;
padding-box O fundo se estende até o limite da borda;
content-box O fundo se estende até a borda da caixa do conteúdo;
initial Seta o valor como sendo o valor padrão inicial;
inherit Específica que uma propriedade deve herdar seu valor do elemento pai.

<!-- CÓDIGO NO CSS -->
#myDIV {
  padding: 15px;
  border: 10px dotted #000000;
  background-color: yellow;  
  background-clip:content-box;
}

Resultado


Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

CSS background-size

Utilizamos esta propriedade para especificar o tamanho da imagem de fundo. Assim como acontece com o background-position, existem diversas formas de declarar esse recurso.

Existem quatro sintaxes diferentes que você pode usar com esta propriedade: a sintaxe com uma palavra-chave ("auto", "cover" e "contain"), a sintaxe com um único valor (define a largura da imagem, a altura torna-se "auto" e é ajustada proporcionalmente), a sintaxe de dois valores (primeiro valor: largura da imagem, segundo valor: altura) e a sintaxe de fundo múltiplo (separados por vírgula).

auto Valor padrão. A imagem de fundo é mostrada no seu tamanho original;
length Seta a largura e a altura da imagem. O primeiro valor seta a largura, o segundo a altura. Se somente um valor for setado, o segundo é setado como “auto”;
percentage Também é setado largura e altura, mas em porcentagem;
cover Redimensiona a imagem para cobrir todo o espaço do contêiner. A imagem pode ficar maior, em altura ou largura, se o contêiner estiver em proporções diferentes. Isso pode esticar a imagem ou cortar um pouco de suas bordas;
contain Redimensiona a imagem para fazer com que ela fique totalmente visível
initial Seta o valor como sendo o valor padrão inicial;
inherit Específica que uma propriedade deve herdar seu valor do elemento pai.

<!-- CÓDIGO NO CSS -->
#example1 {
  border: 2px solid black;
  padding: 25px;
  background: url("mountain.jpg");
  background-repeat: no-repeat;
  background-size: 100px 100px;
}

#example2 {
  border: 2px solid black;
  padding: 25px;
  background: url("mountain.jpg");
  background-repeat: no-repeat;
  background-size: 75% 50%;
}

Resultado



CSS background - Propriedade taquigráfica

Isso significa que você pode escrever todas essas propriedades usando apenas uma propriedade. Essa propriedade é a background:


<!-- CÓDIGO NO  -->
body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

As propriedades que podem ser inseridas nessa forma são:

  • background-color
  • background-image
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment

E é isso, sei que ficou grande, mas acho que abordei tudo ou quase tudo que tem para saber sobre backgrounds em CSS. Se eu lembrar de algo mais eu atualizarei esse tópico e postarei no Facebook um adendo falando da atualização.

Fique ligado que vem mais por aí.

Aprenda as principais linguagens usadas na WEB.

Aqui você tem acesso gratuito às principais linguagens de programação web, não perca tempo, acesse nosso conteúdo e comece a programar agora mesmo.

Compartilhe:

Sobre o autor

Analista de Sistemas com foco atual na área de WEB. Amante de boa música, estratégias criativas. Gosto de trabalhar com quem tem talento, se não for para ser perfeito, melhor nem começar. Gosto de liderança, estratégias e, principalmente, pôr a mão na massa.