Características de Background em CSS

Hello, there! Como você já sabe, CSS é a linguagem utilizada para estilizar páginas e com ela conseguimos definir quais são as propriedades de textos, imagens, espaçamento, fundos etc.

Hoje nós vamos nos concentrar apenas nas características possíveis de serem ajustadas no background (fundo) de uma página ou aplicação. Let's go?

Características de Background em CSS

background-color

Color é a cor do fundo, e podemos definí-la através do código hexadecimal (como #ff0000), um valor em RGB (como 255,0,0) ou pelo próprio nome da cor (red para vermelho, por exemplo).

Além da cor, também é possível definir a transparência de um fundo. Para isso, é só usar a propriedade opacity (opacidade) e um número que varia de 0.0 a 1.0 - quanto menor o número, mais transparente será a cor.

body {
    background-color: #ff0000;
    opacity: 0.5;
}

background-image

Se você quiser usar uma imagem (image) como fundo, é possível fazer isso usando background-image. Lembre-se que a imagem será repetida ao longo de todo o espaço disponível e por isso ela não deve entrar em conflito com o texto.

body {
  background-image: url("background_image.jpg");
}

background-repeat

Por outro lado, se você quiser que a imagem seja repetida apenas horizontalmente ou até que ela não se repita, você pode definir isso com a propriedade background-repeat.

Para que a imagem não se repita e apareça uma única vez, você utilizará o valor no-repeat (sem repetição). Ou, se quiser que ela seja repetida apenas em uma direção, o valor a ser utilizado é repeat-x para uma repetição horizontal e repeat-y para uma repetição vertical. Take a look:

body {
  background-image: url("background_image.jpg");
  background-repeat: repeat-x;
}

background-position

Se você quiser definir uma posição específica onde a imagem deve ser inserida no fundo, você utilizará a propriedade background-position. Os valores possíveis de serem usados são:

• right: direita
• left: esquerda
• top: topo
• bottom: base
• center: centro

Check it out:

body {
  background-image: url("background_image.jpg");
  background-repeat: repeat-x;
  background-position: right top;
}

background-attachment

Por último, você também pode definir se a imagem de fundo vai rodar junto com a página ou se ela vai ficar fixa em um único lugar. Para isso, vamos usar a propriedade background-attachment (lembre-se que uma das traduções do verbo to attach é fixar). Existem dois valores possíveis: fixed, usado quando queremos que a imagem fique estática em um único local, ou scroll, quando queremos que ela rode junto com a página.

body {
  background-image: url("background_image.jpg");
  background-repeat: repeat-x;
  background-position: right top;
  background-attachment: fixed;
}

Did you know you could adjust your background this way? Se você quer aprender mais sobre este tema, continue estudando com a gente no nosso artigo "Tags para formatar textos em HTML". See you!

Aproveite e faça nosso teste de nível de inglês. Ou baixe nossa apostila que te ensina como aprender inglês de maneira eficiente!

Quer realmente aprender outras línguas, como inglês e espanhol? Conheça os nossos cursos que reforçam o aprendizado de inglês e espanhol.