CSS Background – Aula 3

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;
}

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; 
}

Ao usar a propriedade opacity para adicionar transparência ao plano de fundo de um elemento, todos os seus elementos filhos herdam a mesma transparência. Isso pode tornar o texto dentro de um elemento totalmente transparente difícil de ler.

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.

Ao usar a propriedade opacity para adicionar transparência ao plano de fundo de um elemento, todos os seus elementos filhos herdam a mesma transparência. Isso pode tornar o texto dentro de um elemento totalmente transparente difícil de ler.

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("logo.png");
}

OBS: Cuidado com a combinação plano de fundo/texto. Dependendo da imagem, o texto pode ficar ilegível e prejudicar a experiência do usuário.

Atenção! Quando usar imagens de fundo, use uma imagem que não cause distúrbio no texto.

Os valores da propriedade background-image são:

* Essa funções aceitam um valor de onde vão ser iniciadas, você pode querer que a segunda cor comece em 20% da imagem. Ex.: background-image{ radial-gradient(blue, yellow 20%, green); }. Você pode fazer isso em cada uma das cores que forem inseridas na função.

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;
}

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”.

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>

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.

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

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).

<!-- 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%;
}

CSS background – Propriedade taquigráfica

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 e no Instagram um adendo falando da atualização.

Fique ligado que vem mais por aí.