Como alterar a cor de fundo com CSS

gurinho

Um dos momentos mais emocionantes na carreira de qualquer desenvolvedor de front-end em ascensão é aprender como alterar a cor de fundo de uma página da web.

Trabalhar com HTML é ótimo e tudo, mas com apenas algumas linhas de CSS você pode fazer suas páginas e sua jornada de programação florescerem para a vida.

Este guia cobrirá tudo que você precisa saber sobre como alterar a cor de fundo com CSS.

Prepare-se

Vamos fazer um pequeno trabalho preliminar.

Nota : Eu recomendo usar o Visual Studio Code com a extensão Live Server para visualizar as alterações em tempo real conforme você atualiza o HTML e CSS.

  1. Crie uma pasta para os arquivos do seu projeto.
  2. Crie um arquivo index.html para hospedar seu HTML. Você pode usar o código padrão ou apenas configurar algumas tags <html> , <head> e <body> .
  3. Crie um arquivo styles.css para seu CSS.
  4. Vincule seu arquivo CSS ao HTML colocando <link rel = "stylesheet" href = "styles.css"> dentro das tags <head> .

Agora você está pronto para começar a editar o CSS.

Relacionado: Como criar um site padrão

Como alterar a cor de fundo com CSS

A maneira mais simples de alterar a cor do plano de fundo é mirar na tag do corpo . Em seguida, edite a propriedade background-color . Você pode encontrar códigos de cores pesquisando e usando a extensão do navegador Google Color Picker

 body {
 background-color: rgb(191, 214, 255);
 }

Este código muda o fundo para um belo azul claro.

A propriedade background-color aceita cores em seis formas diferentes:

  • nome : lightskyblue; (para uma aproximação)
  • código hexadecimal : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); onde a é alfa (opacidade)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); onde a é alfa (opacidade)

Use a propriedade abreviada de fundo no lugar de cor de fundo para cortar o código extra. Você pode alterar a cor de fundo de qualquer elemento HTML usando este método.

Crie um elemento <div> e dê a ele uma classe – neste caso, a classe é o painel . Defina suas propriedades de altura e largura em CSS. Selecione o elemento em CSS e tire a cor.

 body {
 background-color: rgb(191, 214, 255);
 }
 .container{
 display: flex;
 justify-content: center;
 align-items: center;
 height: 90vh;
 }
 .panel {
 background: rgb(255, 148, 148);
 height: 10rem;
 width: 30%;
 }
 .muo-text {
 font-size: 3em;
 font-weight: bolder;
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 position: absolute;
 }

Aqui você pode ver que a propriedade do fundo do corpo é estilizada independentemente da propriedade do fundo do .panel .

A propriedade background também aceita gradientes:

 body {
 background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
 }

fundo gradiente css com painel Como alterar a imagem de fundo em CSS

E se você quiser que o plano de fundo seja uma imagem em vez de uma cor sólida ou gradiente? A propriedade de fundo abreviada é um amigo familiar.

Certifique-se de que a imagem esteja na mesma pasta que seus arquivos HTML e CSS. Caso contrário, você terá que usar o caminho do arquivo entre parênteses em vez de apenas o nome:

 body {
 background: url(leaves-and-trees.jpg)
 }

Uau! Parece que a imagem está muito ampliada. Você pode corrigir isso com a propriedade background-size .

 body {
 background: url(leaves-and-trees.jpg);
 background-size: cover;
 }

Para usar a propriedade de fundo abreviada em conjunto com a cobertura da propriedade de tamanho do fundo , você também deve especificar as propriedades da posição do fundo e separar os valores com uma barra invertida (mesmo se forem valores posicionais padrão, como canto superior esquerdo .)

 body {
 background: url(leaves-and-trees.jpg) top left / cover;
 }

Ai está! Uma imagem de plano de fundo de tamanho adequado em uma linha de CSS.

Leia mais: Como definir uma imagem de fundo em CSS

Nota : Desconfie de incluir imagens de fundo grandes que ocupam muito espaço de armazenamento. Pode ser difícil carregá-los no celular, onde você tem apenas dois segundos para dar aos usuários um motivo para permanecer na página.

Aprimore seu jogo CSS com CSS box-shadow

Para um desenvolvedor como você, as propriedades da cor de fundo e da imagem de fundo são notícias antigas. Felizmente, sempre há algo novo para aprender.

Experimente dar um impulso às suas caixas com o box-shadow CSS. Seus elementos HTML nunca estiveram melhores!