Background CSS: Estilos de Fundo Para Um Site Mais Atrativo

Estilize o seu site

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.

 

background-css

 

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!

Imagem de: freepick.com

Jornalista apaixonada por literatura, música e cinema. É Analista de Conteúdo na Agência Mestre e, antes disso, foi produtora editorial, assessora de imprensa e teve vários blogs ao longo do caminho. A escrita é sua paixão e acredita que a comunicação pode mover barreiras.