{"id":123682,"date":"2025-03-03T08:17:38","date_gmt":"2025-03-03T06:17:38","guid":{"rendered":"https:\/\/elementor.com\/blog\/como-alterar-a-cor-de-fundo-em-html\/"},"modified":"2025-11-19T00:33:09","modified_gmt":"2025-11-18T22:33:09","slug":"como-alterar-a-cor-de-fundo-em-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/","title":{"rendered":"Como Alterar a Cor de Fundo em HTML"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Alterar as cores de fundo em HTML \u00e9 direto, gra\u00e7as \u00e0 propriedade de cor de fundo do CSS. Embora voc\u00ea sempre possa mergulhar no c\u00f3digo bruto, ferramentas como o construtor de websites Elementor simplificam esse processo, permitindo que voc\u00ea fa\u00e7a altera\u00e7\u00f5es visuais impactantes com alguns cliques.<\/span><\/p>\n

Neste guia abrangente, exploraremos tudo o que voc\u00ea precisa saber sobre cores de fundo – desde os fundamentos do CSS<\/a> at\u00e9 t\u00e9cnicas avan\u00e7adas dentro do Elementor e a import\u00e2ncia de hospedagem r\u00e1pida e confi\u00e1vel para um desempenho ideal.<\/span><\/p>\n

Entendendo o B\u00e1sico<\/span><\/h2>\n

Propriedade background-color do CSS<\/span><\/h3>\n

A propriedade background-color do CSS \u00e9 a base para alterar cores de fundo em HTML. Esta propriedade informa ao navegador web qual cor deve preencher o fundo de um elemento, que pode ser qualquer coisa, desde a p\u00e1gina inteira at\u00e9 uma se\u00e7\u00e3o espec\u00edfica, par\u00e1grafo, bot\u00e3o ou qualquer outra tag HTML.<\/span><\/p>\n

Formatos de Cor<\/span><\/h4>\n

Existem v\u00e1rias maneiras de definir cores em CSS, cada uma com suas vantagens:<\/span><\/p>\n

    \n
  • C\u00f3digos Hexadecimais:<\/b> O formato mais comum, utilizando um c\u00f3digo de seis d\u00edgitos precedido por uma cerquilha (#). Cada par de d\u00edgitos representa a intensidade de vermelho, verde e azul (RGB). Por exemplo, #FF0000 \u00e9 vermelho puro.<\/span><\/li>\n
  • Valores RGB:<\/b> Utilize a fun\u00e7\u00e3o rgb(), especificando valores de 0 a 255 para vermelho, verde e azul. Exemplo: rgb(255, 0, 0) tamb\u00e9m \u00e9 vermelho puro.<\/span><\/li>\n
  • Valores RGBA:<\/b> Este formato estende o RGB com um valor de canal alfa (transpar\u00eancia) de 0 (totalmente transparente) a 1 (totalmente opaco). Exemplo: rgba(255, 0, 0, 0.5) \u00e9 um vermelho semi-transparente.<\/span><\/li>\n
  • Nomes de Cores:<\/b> O CSS suporta um conjunto limitado de nomes de cores b\u00e1sicas, como “red”, “blue” e “yellow”. Embora convenientes, esses nomes oferecem menos flexibilidade.<\/span><\/li>\n<\/ul>\n

    Considera\u00e7\u00f5es na Sele\u00e7\u00e3o de Cores<\/span><\/h4>\n

    Al\u00e9m dos formatos t\u00e9cnicos, escolher as <\/span>corretas<\/span><\/i> cores de fundo requer um toque de pensamento em design:<\/span><\/p>\n

      \n
    • Teoria das Cores:<\/b> Compreender conceitos b\u00e1sicos como cores complementares, cores an\u00e1logas e esquemas de cores tri\u00e1dicas ajudar\u00e1 voc\u00ea a criar websites harmoniosos e visualmente agrad\u00e1veis.<\/span><\/li>\n
    • Acessibilidade:<\/b> Assegure contraste suficiente entre as cores de fundo e do texto para usu\u00e1rios com defici\u00eancias visuais. Numerosas ferramentas online ajudam a verificar as propor\u00e7\u00f5es de contraste.<\/span><\/li>\n<\/ul>\n

      Escolhendo Suas Ferramentas<\/span><\/h4>\n

      Embora voc\u00ea sempre possa modificar diretamente o c\u00f3digo CSS do seu website, v\u00e1rias ferramentas tornam o processo de sele\u00e7\u00e3o e aplica\u00e7\u00e3o de cores de fundo muito mais f\u00e1cil:<\/span><\/p>\n

        \n
      • Seletores de Cores:<\/b> Muitos websites e ferramentas de design oferecem seletores de cores, que permitem selecionar uma cor visualmente e obter seu c\u00f3digo hexadecimal, RGB ou RGBA correspondente.<\/span><\/li>\n
      • Geradores de Cores Online:<\/b> Essas ferramentas frequentemente ajudam voc\u00ea a encontrar paletas de cores que funcionam harmoniosamente com base nos princ\u00edpios da teoria das cores.<\/span><\/li>\n
      • Ferramentas de Desenvolvedor do Navegador:<\/b> A maioria dos navegadores modernos possui ferramentas de desenvolvedor integradas que permitem inspecionar elementos da p\u00e1gina web, ver seus estilos atualmente aplicados (incluindo cores de fundo) e experimentar mudan\u00e7as em tempo real.<\/span><\/li>\n<\/ul>\n

        Se voc\u00ea estiver construindo seu website com o Elementor, muitas dessas ferramentas de sele\u00e7\u00e3o de cores est\u00e3o integradas perfeitamente no editor, proporcionando uma experi\u00eancia simplificada.<\/span><\/p>\n

        M\u00e9todos para Alterar a Cor de Fundo em HTML<\/span><\/h2>\n

        Existem tr\u00eas maneiras principais de modificar cores de fundo em HTML, cada uma com seus casos de uso.<\/span><\/p>\n

        Estilos Inline<\/span><\/h3>\n

        Estilos inline permitem que voc\u00ea aplique estilos CSS diretamente dentro do elemento HTML usando o atributo style. Aqui est\u00e1 um exemplo de como alterar a cor de fundo de um par\u00e1grafo:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

        \n\t\t\t\t
        \n\t\t\t\t\t\t\t
        \n\t\t\t
        \n\t\t\t\t\n\t\t\t\t\tHTML\r\n<p style=\"background-color: lightblue;\">This paragraph has a light blue background.<\/p>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd5b872 elementor-widget elementor-widget-text-editor\" data-id=\"dd5b872\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Pr\u00f3s<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">R\u00e1pido e f\u00e1cil para altera\u00e7\u00f5es simples e \u00fanicas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u00e3o requer uma folha de estilos separada.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Contras<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Pode tornar seu c\u00f3digo HTML desordenado e mais dif\u00edcil de manter, especialmente para websites maiores.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u00e3o \u00e9 ideal para aplicar o mesmo estilo a m\u00faltiplos elementos.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Folhas de Estilo Internas (tag &lt;style&gt;)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Folhas de estilo internas permitem que voc\u00ea defina regras CSS dentro da se\u00e7\u00e3o &lt;head&gt; do seu documento HTML. Este m\u00e9todo permite que voc\u00ea direcione elementos por seu nome de tag, classe ou id.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-bd340e1 elementor-widget elementor-widget-code-highlight\" data-id=\"bd340e1\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n<style>\r\nbody { \r\n   background-color: lightblue; \r\n}\r\n.highlight-box {\r\n   background-color: yellow;\r\n}\r\n<\/style>\r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13e676f elementor-widget elementor-widget-text-editor\" data-id=\"13e676f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Pr\u00f3s<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mant\u00e9m seu CSS organizado dentro do seu arquivo HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mais sustent\u00e1vel do que estilos inline para m\u00faltiplas altera\u00e7\u00f5es em uma \u00fanica p\u00e1gina.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Contras<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Os estilos se aplicam apenas \u00e0 p\u00e1gina HTML espec\u00edfica onde s\u00e3o definidos.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Folhas de Estilo Externas (arquivos .css)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Folhas de estilo externas s\u00e3o arquivos .css separados que cont\u00eam todas as suas regras CSS. Voc\u00ea as vincula ao seu documento HTML utilizando a tag &lt;link&gt; dentro da se\u00e7\u00e3o &lt;head&gt;. Eis um exemplo:<br \/><\/span><\/p>\n<h4><span style=\"font-weight: 400;\">styles.css<\/span><span style=\"font-weight: 400;\"> <\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4dd5d20 elementor-widget elementor-widget-code-highlight\" data-id=\"4dd5d20\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>HTML\r\nbody { \r\n   background-color: lightblue; \r\n}\r\n.highlight-box {\r\n   background-color: yellow;\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dc27c36 elementor-widget elementor-widget-text-editor\" data-id=\"dc27c36\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">index.html<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4f7d418 elementor-widget elementor-widget-code-highlight\" data-id=\"4f7d418\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<head>\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n<\/head>\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4cff07a elementor-widget elementor-widget-text-editor\" data-id=\"4cff07a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Pr\u00f3s<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Melhor pr\u00e1tica para manutenibilidade, pois altera\u00e7\u00f5es na folha de estilos afetam todas as p\u00e1ginas HTML vinculadas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Promove uma separa\u00e7\u00e3o clara entre a estrutura HTML e a estiliza\u00e7\u00e3o CSS.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u00c9 ideal para websites de grande escala com necessidades de estiliza\u00e7\u00e3o consistentes.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Utilizar um construtor de websites como o Elementor frequentemente simplifica o gerenciamento de folhas de estilo externas. O Elementor gera folhas de estilo otimizadas nos bastidores e integra mudan\u00e7as de estilo perfeitamente na experi\u00eancia de edi\u00e7\u00e3o visual.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Aplicando Cores de Fundo com o Elementor<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Destaque da Interface Visual do Elementor<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Uma das principais vantagens do construtor de websites Elementor \u00e9 sua interface visual intuitiva. Diferentemente do desenvolvimento web tradicional baseado em c\u00f3digo, o Elementor permite que voc\u00ea veja suas altera\u00e7\u00f5es de cor de fundo em tempo real enquanto projeta. Isso elimina conjecturas e torna o processo significativamente mais r\u00e1pido e agrad\u00e1vel.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Direcionamento de Elementos<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O Elementor permite que voc\u00ea aplique cores de fundo a v\u00e1rios elementos em seu website:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fundo da P\u00e1gina\/Website:<\/b><span style=\"font-weight: 400;\"> Altere a cor de fundo de toda a sua p\u00e1gina ou website, geralmente aplicada \u00e0 tag &lt;body&gt; do seu HTML.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Se\u00e7\u00f5es:<\/b><span style=\"font-weight: 400;\">  Websites do Elementor s\u00e3o frequentemente constru\u00eddos usando se\u00e7\u00f5es, que atuam como cont\u00eaineres para seu conte\u00fado. Personalize a cor de fundo de se\u00e7\u00f5es individuais para criar separa\u00e7\u00e3o visual.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Colunas:<\/b><span style=\"font-weight: 400;\">  Dentro das se\u00e7\u00f5es, as colunas fornecem estrutura adicional ao layout. Aplicar diferentes cores de fundo \u00e0s colunas pode ajudar a organizar visualmente seu conte\u00fado.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Widgets:<\/b><span style=\"font-weight: 400;\"> A rica biblioteca de widgets do Elementor (bot\u00f5es, cabe\u00e7alhos, galerias de imagens, etc.) frequentemente vem com suas pr\u00f3prias configura\u00e7\u00f5es de cor de fundo.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Guia Passo a Passo: Alterando Cores de Fundo no Elementor<\/span><\/h3>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Selecione o Elemento:<\/b><span style=\"font-weight: 400;\"> No editor do Elementor, clique no elemento que deseja modificar (se\u00e7\u00e3o, coluna, widget, etc.).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Abra o Painel de Estiliza\u00e7\u00e3o:<\/b><span style=\"font-weight: 400;\">  A barra lateral esquerda mudar\u00e1 para as configura\u00e7\u00f5es do elemento. Navegue at\u00e9 a aba &#8220;Estilo&#8221;.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controles de Fundo:<\/b><span style=\"font-weight: 400;\">  Procure pela se\u00e7\u00e3o &#8220;Fundo&#8221; ou &#8220;Cor de Fundo&#8221;. O Elementor fornecer\u00e1 um seletor de cores, frequentemente com op\u00e7\u00f5es avan\u00e7adas como gradientes (discutiremos isso mais adiante!)<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Escolha Sua Cor:<\/b><span style=\"font-weight: 400;\"> Use o seletor de cores, insira um c\u00f3digo de cor diretamente (hex, RGB, RGBA), ou selecione entre cores salvas.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Visualize e Salve:<\/b><span style=\"font-weight: 400;\"> Voc\u00ea pode ver sua altera\u00e7\u00e3o instantaneamente no editor, fazer ajustes e salvar seu trabalho.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Avan\u00e7ado: Construtor de Temas do Elementor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O Construtor de Temas do Elementor leva o controle de cores de fundo a um n\u00edvel superior, permitindo que voc\u00ea defina regras de estilo globais que se propagam por todo o seu website. Isso \u00e9 incrivelmente valioso para garantir uma experi\u00eancia visual coesa e para fazer altera\u00e7\u00f5es em todo o site rapidamente.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Dentro do Construtor de Temas, voc\u00ea geralmente pode personalizar as configura\u00e7\u00f5es de fundo para elementos padr\u00e3o como:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cabe\u00e7alho e Rodap\u00e9:<\/b><span style=\"font-weight: 400;\"> Aplique uma cor de fundo consistente \u00e0s se\u00e7\u00f5es superior e inferior do seu website.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>P\u00e1ginas de Arquivo:<\/b><span style=\"font-weight: 400;\"> Controle o fundo para listagens de posts do blog, p\u00e1ginas de categoria, etc.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Modelos de Post\/P\u00e1gina Individual:<\/b><span style=\"font-weight: 400;\"> Determine o estilo de fundo padr\u00e3o para p\u00e1ginas e posts individuais.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Construtor de Sites com IA do Elementor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Para usu\u00e1rios que buscam uma experi\u00eancia ainda mais simplificada, o Construtor de Websites com IA do Elementor incorpora sugest\u00f5es de design baseadas em IA, frequentemente incluindo recomenda\u00e7\u00f5es de cores de fundo adaptadas \u00e0 sua marca e conte\u00fado.<\/span><\/p>\n<p><b>Benef\u00edcio Principal:<\/b><span style=\"font-weight: 400;\"> Configurar esses estilos de fundo globais no Construtor de Temas garante que novas p\u00e1ginas que voc\u00ea criar herdem automaticamente esses estilos, economizando tempo e promovendo consist\u00eancia.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Lembre-se de que as op\u00e7\u00f5es precisas e a interface do Elementor podem evoluir, portanto, sempre consulte a documenta\u00e7\u00e3o oficial para a orienta\u00e7\u00e3o mais atualizada.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Al\u00e9m dos Fundos B\u00e1sicos<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Gradientes<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Os gradientes permitem que Vossa Senhoria crie transi\u00e7\u00f5es suaves entre m\u00faltiplas cores, adicionando profundidade e interesse visual aos seus projetos de fundo. Existem dois tipos principais:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gradientes Lineares:<\/b><span style=\"font-weight: 400;\"> As cores se mesclam em uma linha reta. Vossa Senhoria pode especificar a dire\u00e7\u00e3o (de cima para baixo, diagonal, etc.) e m\u00faltiplos pontos de parada de cor.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Gradientes Radiais:<\/b><span style=\"font-weight: 400;\"> As cores fazem a transi\u00e7\u00e3o para fora a partir de um ponto central, criando um efeito circular ou el\u00edptico.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Criando Gradientes com CSS<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O CSS fornece fun\u00e7\u00f5es para criar gradientes dentro da sua folha de estilo. Por exemplo:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-56c0767 elementor-widget elementor-widget-code-highlight\" data-id=\"56c0767\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbackground: linear-gradient(to right, red, orange, yellow); <\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b6d7071 elementor-widget elementor-widget-text-editor\" data-id=\"b6d7071\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Controles de Gradiente do Elementor<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O Elementor simplifica a cria\u00e7\u00e3o de gradientes com seus controles visuais de gradiente. Tipicamente, Vossa Senhoria pode:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Escolher entre gradientes lineares e radiais<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Adicionar m\u00faltiplos pontos de parada de cor e ajustar suas posi\u00e7\u00f5es<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Controlar o \u00e2ngulo ou dire\u00e7\u00e3o do gradiente<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Salvar suas cria\u00e7\u00f5es de gradiente para reutiliza\u00e7\u00e3o<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Imagens como Planos de Fundo<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">O uso de imagens como planos de fundo abre uma ampla gama de possibilidades de design. Eis como definir uma imagem como plano de fundo em CSS:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d196b4 elementor-widget elementor-widget-code-highlight\" data-id=\"3d196b4\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody {\r\n  background-image: url('path\/to\/your\/image.jpg'); \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-9545827 elementor-widget elementor-widget-text-editor\" data-id=\"9545827\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Propriedades CSS Principais para Planos de Fundo de Imagem<\/span><\/h5>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">background-size<\/span><b>:<\/b><span style=\"font-weight: 400;\"> Controla como a imagem \u00e9 dimensionada para se ajustar ao seu cont\u00eainer (as op\u00e7\u00f5es incluem cover, contain e comprimentos espec\u00edficos).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">background-repeat<\/span><b>:<\/b><span style=\"font-weight: 400;\"> Determina se a imagem se repete (repeat, no-repeat) e em quais dire\u00e7\u00f5es.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">background-position<\/span><b>:<\/b><span style=\"font-weight: 400;\"> Ajusta com precis\u00e3o o posicionamento da imagem dentro de seu cont\u00eainer.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Combinando Cores de Fundo e Imagens<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Sobrepor uma cor de fundo semi-transparente a uma imagem pode adicionar um toque de sofistica\u00e7\u00e3o e melhorar a legibilidade do texto. Esta t\u00e9cnica funciona combinando as propriedades background-image e background-color. Aqui est\u00e1 um exemplo b\u00e1sico:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b442f9e elementor-widget elementor-widget-code-highlight\" data-id=\"b442f9e\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.image-overlay {\r\n background-image: url('path\/to\/your\/image.jpg'); \r\n background-color: rgba(0, 0, 0, 0.5); \/* Black with 50% opacity *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-52ccf27 elementor-widget elementor-widget-text-editor\" data-id=\"52ccf27\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5><span style=\"font-weight: 400;\">Dicas para T\u00e9cnicas de Sobreposi\u00e7\u00e3o<\/span><\/h5>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Experimente com a Opacidade:<\/b><span style=\"font-weight: 400;\"> Ajuste o valor alfa na cor RGBA para controlar o quanto a imagem de fundo \u00e9 vis\u00edvel.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Utilize Gradientes:<\/b><span style=\"font-weight: 400;\"> Em vez de uma cor s\u00f3lida, sobreponha um gradiente para um efeito mais din\u00e2mico e visualmente intrigante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Controles do Elementor:<\/b><span style=\"font-weight: 400;\"> O Elementor simplifica este processo, frequentemente permitindo que Vossa Senhoria ajuste a opacidade da cor de fundo diretamente em seu editor visual.<\/span><\/li>\n<\/ul>\n<p><b>Uma Observa\u00e7\u00e3o sobre o Desempenho:<\/b><span style=\"font-weight: 400;\"> Embora as imagens de fundo possam ser deslumbrantes, esteja atento ao tamanho do arquivo. Imagens grandes podem retardar os tempos de carregamento do site &#8211; discutiremos t\u00e9cnicas de otimiza\u00e7\u00e3o na pr\u00f3xima se\u00e7\u00e3o!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Melhores Pr\u00e1ticas e Solu\u00e7\u00e3o de Problemas<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Especificidade<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Lembre-se de que as regras CSS seguem uma hierarquia. Seletores mais espec\u00edficos geralmente substituem os mais gerais. Considere estes exemplos:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e1256ac elementor-widget elementor-widget-code-highlight\" data-id=\"e1256ac\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nbody { background-color: blue; } \/* General rule *\/\r\n#main-content { background-color: green; } \/* More specific, will likely override *\/\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f03c1b9 elementor-widget elementor-widget-text-editor\" data-id=\"f03c1b9\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Se a cor de fundo permanecer a mesma conforme esperado, pode haver uma regra mais espec\u00edfica tendo preced\u00eancia.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Compatibilidade com Navegadores<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Embora os navegadores modernos sejam bastante bons em renderizar cores de fundo de forma consistente, \u00e9 prudente testar seu site em diferentes navegadores (Chrome, Firefox, Edge, etc.) e dispositivos para garantir que seu design apare\u00e7a como pretendido em todos os lugares.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Resolu\u00e7\u00e3o de Problemas Comuns<\/span><\/h3>\n<h4><span style=\"font-weight: 400;\">Cor Inesperada<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Verifique novamente seus c\u00f3digos de cor (hex, RGB). Um simples erro de digita\u00e7\u00e3o pode causar resultados inesperados.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Fundo N\u00e3o Vis\u00edvel<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Certifique-se de que o elemento que Vossa Senhoria est\u00e1 visando tenha dimens\u00f5es (altura e largura). Se estiver vazio ou muito pequeno, o fundo n\u00e3o ser\u00e1 exibido.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Estilos Conflitantes<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Use as ferramentas de desenvolvedor do seu navegador para inspecionar o elemento e ver quais estilos CSS est\u00e3o sendo aplicados e de onde. Isso ajuda a identificar regras sobrepostas.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">As Ferramentas de Desenvolvedor S\u00e3o Suas Aliadas<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Todos os principais navegadores incluem ferramentas de desenvolvedor (geralmente acess\u00edveis pressionando F12). Essas ferramentas oferecem insights valiosos, incluindo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Inspecionar Elementos:<\/b><span style=\"font-weight: 400;\"> Esta ferramenta permite que Vossa Senhoria veja todas as propriedades CSS aplicadas a qualquer elemento em sua p\u00e1gina e calcule dimens\u00f5es.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Aba de Rede:<\/b><span style=\"font-weight: 400;\"> Monitore quanto tempo leva para carregar imagens e outros recursos, ajudando a identificar poss\u00edveis gargalos.<\/span><\/li>\n<\/ol>\n<p><b>Ponto-chave:<\/b><span style=\"font-weight: 400;\"> O uso do Elementor frequentemente reduz a necessidade de solu\u00e7\u00e3o de problemas direta, pois sua interface visual ajuda a prevenir muitos conflitos de estilo comuns.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclus\u00e3o<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">As cores de fundo, embora aparentemente simples, desempenham um papel fundamental na elabora\u00e7\u00e3o da apar\u00eancia e da sensa\u00e7\u00e3o geral do seu site. Desde influenciar a percep\u00e7\u00e3o da marca at\u00e9 melhorar a legibilidade, elas podem verdadeiramente transformar sua presen\u00e7a digital.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ao compreender os fundamentos da propriedade background-color do CSS, explorar diferentes formatos de cores e aproveitar o poder de ferramentas como o Elementor, o senhor desvenda um vasto universo de possibilidades criativas.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">\u00c9 imperativo recordar que a sele\u00e7\u00e3o de cores de fundo concerne tanto \u00e0 est\u00e9tica quanto ao desempenho. O senhor deve considerar a teoria das cores, a acessibilidade e as estrat\u00e9gias de otimiza\u00e7\u00e3o (especialmente ao utilizar imagens) para assegurar que seus planos de fundo aprimorem tanto a beleza quanto a velocidade de seu s\u00edtio eletr\u00f4nico, proporcionando uma experi\u00eancia de usu\u00e1rio excepcional.<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.<\/p>\n","protected":false},"author":2024234,"featured_media":113336,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[517],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-recursos-pt-br"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Como Alterar a Cor de Fundo em HTML<\/title>\n<meta name=\"description\" content=\"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Como Alterar a Cor de Fundo em HTML\" \/>\n<meta property=\"og:description\" content=\"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:17:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-18T22:33:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"631\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Como Alterar a Cor de Fundo em HTML\",\"datePublished\":\"2025-03-03T06:17:38+00:00\",\"dateModified\":\"2025-11-18T22:33:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\"},\"wordCount\":2289,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"articleSection\":[\"Recursos\"],\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\",\"name\":\"Como Alterar a Cor de Fundo em HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"datePublished\":\"2025-03-03T06:17:38+00:00\",\"dateModified\":\"2025-11-18T22:33:09+00:00\",\"description\":\"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png\",\"width\":1200,\"height\":631},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recursos\",\"item\":\"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Como Alterar a Cor de Fundo em HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Como Alterar a Cor de Fundo em HTML","description":"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/","og_locale":"pt_BR","og_type":"article","og_title":"Como Alterar a Cor de Fundo em HTML","og_description":"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.","og_url":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:17:38+00:00","article_modified_time":"2025-11-18T22:33:09+00:00","og_image":[{"width":1200,"height":631,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Escrito por":"Itamar Haim","Est. tempo de leitura":"12 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Como Alterar a Cor de Fundo em HTML","datePublished":"2025-03-03T06:17:38+00:00","dateModified":"2025-11-18T22:33:09+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/"},"wordCount":2289,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","articleSection":["Recursos"],"inLanguage":"pt-BR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/","url":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/","name":"Como Alterar a Cor de Fundo em HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","datePublished":"2025-03-03T06:17:38+00:00","dateModified":"2025-11-18T22:33:09+00:00","description":"As cores de fundo podem parecer um detalhe simples, mas desempenham um papel surpreendentemente significativo na apar\u00eancia geral, na sensa\u00e7\u00e3o e at\u00e9 mesmo no sucesso do seu website. Um esquema de cores de fundo bem escolhido pode estabelecer o tom para toda a sua marca, destacar conte\u00fado importante e guiar o olhar do usu\u00e1rio para uma experi\u00eancia de navega\u00e7\u00e3o mais fluida.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2020\/12\/14.12.2020_WEB-DESIGNER-VS-WEB-DEVELOPER_BLOG-01-2.png","width":1200,"height":631},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/pt-br\/como-alterar-a-cor-de-fundo-em-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/pt-br\/"},{"@type":"ListItem","position":2,"name":"Recursos","item":"https:\/\/elementor.com\/blog\/pt-br\/category\/recursos-pt-br\/"},{"@type":"ListItem","position":3,"name":"Como Alterar a Cor de Fundo em HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/pt-br\/#website","url":"https:\/\/elementor.com\/blog\/pt-br\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/pt-br\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/pt-br\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/pt-br\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/elementor.com\/blog\/pt-br\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/pt-br\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/comments?post=123682"}],"version-history":[{"count":2,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123682\/revisions"}],"predecessor-version":[{"id":143940,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/posts\/123682\/revisions\/143940"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media\/113336"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/media?parent=123682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/categories?post=123682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/tags?post=123682"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_persona?post=123682"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/pt-br\/wp-json\/wp\/v2\/marketing_intent?post=123682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}