Quando falamos de visual de site, o background CSS fornece várias opções de customização, como cores, imagens (e onde serão posicionadas) e muito mais. Se você quer aprender melhor o conceito e começar hoje mesmo a deixar o seu site mais atrativo, siga lendo.
Neste artigo, você vai encontrar:
- o que é CSS;
- o que é e para que serve o background CSS;
- por que se preocupar com a cara do seu site.
Resgatando o que é CSS
Antes de entender melhor o que é e como funciona o background CSS, é bom relembrar o que é Cascading Style Sheet (CSS).
Nada mais é do que uma linguagem usada para marcar elementos como HTML. É a responsável por estilizar o visual de um site, por exemplo. Com ela, é possível mudar cores e estilos de texto, layouts, ajustar imagens etc.
Ou seja, com o CSS, as possibilidades de personalização de uma página em HTML são quase infinitas.
O que é e para que serve o background CSS?
Assim como existem propriedades de CSS específicas para cada função de personalização em um layout (como padding CSS e position CSS), existe aquela que define o background (fundo) em layout HTML. Ou seja, atribui valores, dados e conjuntos de propriedades.
A propriedade background-image, por exemplo, é aplicada em todos os elementos HTML e serve para adicionar uma imagem de fundo em uma página online.
Nela, é preciso usar a função url(), A imagem, por padrão, fica no canto superior esquerdo, mas é possível sim customizar essa posição.
Veja, a seguir, outras propriedades CSS background.
Background
Essa é a principal propriedade para alterar e personalizar o fundo de uma página. Com ela, é possível utilizar uma sintaxe abreviada, de forma mais rápida.
- repeat: para que a imagem se repita na vertical e horizontal até o preenchimento da área do elemento;
- repeat-x: para que a imagem se repita só na horizontal;
- repeat-y: para que a imagem se apenas no sentido vertical;
- no-repeat: para que a imagem não se repita.
Background-color
Usada para alterar a cor do fundo do site, seja de apenas um elemento ou de um documento inteiro. É bem simples: basta incluir a cor da sua preferência junto ao background-color.
Background-repeat
Importante para definir o modo como a imagem de fundo vai se repetir.
Background-position
Com ela é possível escolher onde a imagem será inserida e pode ser até ser combinada com valores. Por exemplo: um na horizontal e outro na vertical. Veja:
- left top: elemento fica a esquerda superior;
- left center: elemento fica na esquerda e ao centro;
- left bottom: elemento fica na esquerda inferior;
- right top: elemento fica na direita superior;
- right center: elemento fica na direita e ao centro;
- right bottom: elemento fica na direita inferior;
- center top: elemento fica no centro superior;
- center center: elemento fica no centro;
- center bottom: elemento fica no centro inferior;
- x% y%: parte do elemento fica na horizontal e parte na vertical;
- x-pos y-pos: elemento fica fixo nas posições horizontal e vertical.
Background múltiplo
Nessa opção de CSS background, é possível inserir diversos elementos, imagens, no fundo do site, basta usar a propriedade background-image e incluir as URLs de cada elemento.
Background-size
A background-position é usada para definir o tamanho da imagem que ficará no fundo do layout do site. Isso pode ser feito definindo os valores em pixels, um para largura e outro para altura, por exemplo. Veja:
- auto: para a imagem ser redimensionada, desconsiderando o fato de que, talvez, fique distorcida;
- cover: para a imagem ser redimensionada e se encaixar melhor na área desejada, sem ser distorcida;
- contain: para a imagem ser redimensionada e se encaixar no espaço que estiver disponível.
Background-origin
Ao contrário da background-position, essa propriedade define que a imagem será inserida a partir de um ponto relacionado aos outros elementos.
Background-clip
A propriedade background-clip serve para que seja possível selecionar a área do fundo da página que será preenchida (pintada). Dessa forma, se torna possível escolher se apenas a boda será pintada ou o conteúdo inteiro, por exemplo.
Background-blend-mode
Serve para incluir efeitos aos elementos e cores HTML no background, como brilho e saturação ou até degradê, por exemplo radial-gradient(). Essa função irá adicionar oefeito degradê entre mais de de uma cor, a partir de um ponto pré-selecionado.
As sintaxes que podem ser usadas para essa background css são:
- ângulo: inclinação em que o efeito degradê vai aparecer;
- cor1, cor2: as duas - ou mais - cores a serem utilizadas;
- tamanho: o espaço que cada cor vai aparecer (aqui, você pode definir em porcentagem ou pixels).
Agora, para repetir o efeito você pode usar a repeating-radial-gradient().
Para compartilhar a imagem de background do elemento pai, basta atribuir o valor inherit à propriedade.
Por que se preocupar com a cara do seu site?
Um site bonito vai conquistar de vez as pessoas. Para que os usuários saibam da existência de uma página, estratégias de SEO e marketing são importantes. No entanto, se a aparência do site não for atrativa, dificilmente o seu público vai voltar.
Por isso, é tão importante se preocupar com a escolha de cores, fontes e imagens. Mas já que você está aqui, talvez já saiba disso. Então, além do design, veja outros pontos importantes que tornam sua página mais bonita e organizada:
Identidade visual
Não adianta saber usar as propriedades background CSS se você não sabe quais cores e estilos vão representar a sua marca. Por isso, considere criar uma identidade visual, já que ela vai ser a cara do seu negócio e transmitirá exatamente o que você quer que o usuário perceba.
Boa programação
Sites mal programados podem causar várias dores de cabeça. Por isso, além do visual (frontend) é preciso que a página seja realmente funcional: tenha um carregamento rápido, a URL otimizada e forneça uma experiência intuitiva e positiva para o usuário.
Agora que já entendeu o que é o background CSS, aproveite e conheça melhor as funcionalidades e facilidades que a GoDaddy oferece para você, dono de site. Afinal, no criador de sites da GoDaddy você tem o site dos seus sonhos de forma muito prática!
