Como Adicionar uma Imagem de Fundo no WordPress (6 Maneiras Fáceis)

Imagens de fundo podem transformar completamente a aparência e a sensação do seu site WordPress. Mas imagens esticadas, alinhamento incorreto ou problemas de tamanho de arquivo podem atrapalhar. Especialmente se você não tem certeza de qual método usar.

Com base em nossa experiência gerenciando dezenas de sites WordPress, aprendemos que a maioria das pessoas torna esse processo muito mais difícil do que precisa ser.

A boa notícia é que o WordPress oferece várias opções integradas para adicionar imagens de fundo, além de plugins excelentes que facilitam ainda mais. Assim que você souber os métodos corretos, poderá adicionar belos fundos a todo o seu site, páginas individuais ou seções específicas em apenas alguns cliques.

Neste guia, mostraremos 5 maneiras confiáveis de adicionar imagens de fundo no WordPress que funcionam para qualquer nível de habilidade. 🎨

Por que adicionar uma imagem de fundo no WordPress?

Adicionar uma imagem ao seu site WordPress pode torná-lo mais atraente para os visitantes. Você pode chamar rapidamente a atenção dos usuários e engajá-los com seu conteúdo.

Isso também permite personalizar o design do seu site de acordo com sua marca. Por exemplo, você pode carregar fotos sutis de seus produtos ou mascote da marca no fundo.

Além disso, você pode adicionar um vídeo do YouTube como fundo completo ou uma apresentação de slides de imagens que dará vida ao seu conteúdo.

No entanto, sugerimos selecionar imagens de fundo que não sejam distrativas ou que dificultem a leitura do conteúdo em seu blog WordPress. Um fundo deve aprimorar a experiência do usuário e ajudar a transmitir sua mensagem aos visitantes.

Além disso, é importante escolher uma imagem de fundo que seja compatível com dispositivos móveis e não afete a velocidade do seu site. Caso contrário, isso prejudicará seu SEO para WordPress.

Neste artigo, compartilharemos diferentes maneiras de adicionar uma imagem de fundo no WordPress.

Abordaremos vários métodos, incluindo o personalizador de temas do WordPress, editor de site completo, plugin, construtor de temas e muito mais. Basta clicar no link abaixo para pular para a seção de sua preferência:

• Método 1. Adicionar uma Imagem de Fundo Usando o Personalizador de Temas do WordPress
• Método 2. Adicionar uma Imagem de Fundo Personalizada Usando o Editor de Site Completo
• Método 3. Adicionar uma Imagem de Fundo Usando o Construtor de Temas do WordPress
• Método 4. Adicionar uma Imagem de Fundo Usando o CSS Hero
• Método 5. Adicionar Imagens de Fundo Personalizadas em Qualquer Lugar no WordPress Usando Código CSS
• Recursos Bônus: Guias de Arquivos de Imagem e Mídia para Melhorar a Experiência do Usuário do Site WordPress

Pronto? Vamos começar.

Método 1. Adicionar uma Imagem de Fundo Usando o Personalizador de Temas do WordPress

A maioria dos temas populares do WordPress vem com suporte a fundo personalizado. Esse recurso permite que você defina facilmente uma imagem de fundo. Recomendamos este método se o seu tema o suportar.

No entanto, se a sua opção de menu do personalizador estiver faltando, seu tema pode ter a edição completa do site ativada. Na próxima seção, abordaremos como usar o editor de site completo para alterar sua imagem de fundo.

Enquanto isso, para usar o 'Personalizador', você precisa visitar a página Aparência » Personalizar no seu painel do WordPress.

Isso iniciará o personalizador de temas do WordPress, que permite alterar diferentes configurações do tema enquanto visualiza uma prévia ao vivo do seu site.

Observe que as opções que você vê variarão com base no tema do WordPress que você está usando. Neste tutorial, estamos usando o tema Sydney.

Se você estiver usando um tema diferente, pode ser necessário consultar a documentação desse tema. Se você não conseguir encontrar uma imagem de fundo no personalizador, também pode entrar em contato com o desenvolvedor do tema para saber como adicionar uma.

Nas opções do personalizador do tema Sydney, você precisa clicar em 'Geral' no painel à esquerda.

Uma vez que você fizer isso, verá diferentes opções 'Gerais' para personalizar seu tema Sydney.

Neste ponto, você precisará clicar na seção 'Imagem de Fundo'.

Na próxima tela, você verá a opção de adicionar sua imagem de fundo.

Prossiga e clique no botão 'Selecionar imagem'.

Isso abrirá a biblioteca de mídia do WordPress.

Aqui, você pode fazer upload de uma imagem do seu computador ou selecionar uma que você já enviou anteriormente.

Depois de escolher a imagem para o seu plano de fundo, você precisará clicar no botão ‘Selecionar’.

Isso fechará o pop-up de mídia e você verá uma prévia da imagem de fundo selecionada no personalizador de temas.

No painel esquerdo, você pode ajustar a posição da imagem (topo, centro, inferior, esquerda, direita) para controlar como ela aparece no plano de fundo. Você também pode redimensioná-la usando o menu suspenso ‘Tamanho da Imagem’ menu suspenso para ajustar, preencher ou cobrir a área.

Se você quiser que a imagem se repita em todo o plano de fundo, marque a caixa que diz ‘Repetir Imagem de Fundo’. Você também pode fazer com que a imagem role junto com o conteúdo da página quando você marcar a caixa ‘Rolar com a Página’.

Assim que estiver satisfeito com o resultado, clique no botão ‘Publicar’ no topo para salvar suas configurações.

É só isso. Você adicionou com sucesso uma imagem de fundo ao seu site WordPress. Acesse seu site para vê-la em ação.

Método 2. Adicionar uma Imagem de Fundo Personalizada Usando o Editor de Site Completo

Se você estiver usando um tema WordPress baseado em blocos, você pode adicionar uma imagem de fundo personalizada usando o editor de site completo (FSE).

O editor de site completo permite que você edite o design do seu site usando blocos. É como editar um post de blog ou uma página usando o editor de blocos do WordPress.

Para este tutorial, usaremos o tema padrão ‘Twenty Twenty-Two’. Para iniciar o editor de site completo, basta ir em Aparência » Editor na sua área de administração do WordPress.

Uma vez que você esteja no editor de site completo, você precisará adicionar um bloco 'Capa' ao seu modelo para fazer upload de uma imagem de fundo.

Simplesmente clique no sinal de '+' na parte superior e adicione um bloco 'Capa'.

Para adicionar uma imagem de fundo ao bloco 'Capa', prossiga e clique no botão 'Upload' ou 'Biblioteca de Mídia'.

Isso abrirá a janela pop-up do uploader de mídia do WordPress.

O próximo passo é escolher uma imagem que você gostaria de usar como fundo do site.

Quando você tiver escolhido a imagem, simplesmente clique no botão 'Selecionar'.

Assim que a imagem for adicionada ao bloco 'Capa', você precisará defini-la como o fundo da página.

Para fazer isso, simplesmente clique no ícone 'Visualização de Lista' na parte superior (ícone com 3 traços). Isso abrirá uma visualização em esboço dos elementos do tema, como o cabeçalho do site e o rodapé.

Depois disso, simplesmente arraste e solte todos os elementos do modelo sob o bloco 'Capa' na visualização de lista.

Assim que todos estiverem lá embaixo, a imagem do bloco 'Capa' aparecerá como o fundo do site.

Depois disso, você pode ajustar a imagem de fundo clicando no bloco 'Capa' e selecionando o ícone de engrenagem no canto superior direito da tela. Isso abrirá o painel de configurações do 'Bloco'.

Aqui, você encontrará opções para tornar a imagem um fundo fixo, ajustar sua sobreposição, editar a cor e mais.

Quando terminar, não se esqueça de clicar no botão 'Salvar'.

E é isso! Você adicionou com sucesso uma imagem de fundo usando o editor de site completo.

Método 3. Adicionar uma Imagem de Fundo Usando o Construtor de Temas do WordPress

Outra forma de adicionar imagens de fundo personalizadas ao seu site é usando um construtor de temas WordPress como o SeedProd. É o melhor plugin de página de destino WordPress com funcionalidade de arrastar e soltar que permite personalizar facilmente o design do seu site sem tocar em uma única linha de código.

Também usamos o SeedProd em alguns dos nossos sites de marca, e ele tem funcionado muito bem. Para mais detalhes sobre nossa experiência, você pode conferir nossa extensa análise do SeedProd.

Para este tutorial, usaremos a versão SeedProd Pro porque ela inclui o construtor de temas. Existe também uma versão SeedProd Lite que você pode experimentar gratuitamente.

Primeiro, você precisará instalar e ativar o plugin SeedProd. Se precisar de ajuda, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você verá a tela de boas-vindas do SeedProd no seu painel do WordPress.

Em seguida, você desejará inserir sua chave de licença e clicar no botão ‘Verificar Chave’ para ativar a versão pro do plugin. Você pode encontrar sua chave de licença na área da sua conta SeedProd.

Assim que tudo estiver configurado, você precisará ir para SeedProd » Theme Builder no seu painel de administração do WordPress.

Vá em frente e clique no botão ‘Temas’ no topo.

O SeedProd agora oferecerá vários modelos de temas para escolher.

Você pode passar o mouse e clicar em qualquer modelo que desejar usar. Para este tutorial, usaremos o modelo de tema ‘Starter’.

A partir daqui, o SeedProd gerará diferentes modelos, como a página inicial, postagem única, página única, barra lateral, cabeçalho e muito mais.

Para adicionar uma imagem de fundo que apareça em todo o site e em todos os modelos de tema, vá em frente e clique na opção ‘Editar Design’ em CSS Global.

Na próxima tela, você verá as configurações de CSS globais que pode alterar.

Basta clicar na opção ‘Background’ para começar a personalizar.

Depois disso, você verá as opções ‘Background Image’.

Clique em ‘Use Your Own Image’ para carregar sua foto. Alternativamente, você pode clicar no botão ‘Use a Stock Image’ para procurar uma imagem de banco de imagens para usar como plano de fundo do seu site.

Assim que adicionar uma imagem de fundo, o construtor SeedProd exibirá uma prévia em tempo real.

Você pode ajustar a posição do fundo, se necessário. Você também pode escolher se deseja usar a cobertura em tela cheia ou repeti-la, entre outras opções.

Além disso, você pode editar o nível de escuridão da sua imagem de fundo movendo o controle deslizante ‘Dim Background’. Quanto maior a pontuação, mais escura a imagem será.

Quando terminar de editar a imagem de fundo, basta clicar no botão ‘Save’ no topo e fechar as configurações de CSS Global.

Se você quiser adicionar uma imagem de fundo personalizada para diferentes partes do seu site, você pode editar esses modelos de tema individuais no SeedProd. Para mais detalhes, sinta-se à vontade para consultar nosso guia sobre como criar facilmente um tema personalizado do WordPress.

Método 4. Adicionar uma Imagem de Fundo Usando o CSS Hero

CSS Hero é um plugin do WordPress que permite fazer qualquer alteração no seu tema sem codificação.

Você pode adicionar imagens de fundo rapidamente em algumas etapas simples. Mas primeiro, você precisará instalar e ativar o CSS Hero. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Depois de fazer isso, você pode começar a personalizar seu site.

A primeira coisa que você precisa fazer é abrir sua página inicial no seu navegador. Lá, você verá o link 'Personalizar com CSS Hero' na sua barra de administração.

Simplesmente clique no link e você verá as opções do CSS Hero se abrirem.

Uma vez dentro, você precisará passar o mouse sobre a área onde deseja adicionar uma imagem. Em seguida, clique na área para acessar a opção 'Background' (Fundo) na barra lateral esquerda.

Clique em 'Background' (Fundo) para ver as configurações para adicionar uma imagem.

A partir daí, basta clicar em 'Image' (Imagem).

Em seguida, você pode escolher uma imagem do Unsplash ou fazer o upload da sua para criar seu plano de fundo.

Ao clicar na imagem desejada, você verá o botão ‘Aplicar Imagem’.

Em seguida, você pode querer escolher o tamanho que deseja para sua imagem. Recomendamos escolher a versão grande para que ela se estenda pela página.

Finalmente, você pode clicar em ‘Salvar e Publicar’ na parte inferior para salvar a imagem de fundo do seu site.

Método 5. Adicionar Imagens de Fundo Personalizadas em Qualquer Lugar no WordPress Usando Código CSS

Por padrão, o WordPress adiciona várias classes CSS a diferentes elementos HTML em todo o seu site WordPress. Assim, você pode facilmente adicionar imagens de fundo personalizadas a posts individuais, categorias, autores e outras páginas usando essas classes CSS geradas pelo WordPress.

Por exemplo, se você tem uma categoria em seu site chamada TV, o WordPress adicionará automaticamente essas classes CSS à tag body quando alguém visualizar a página da categoria TV.

<body class="archive category category-tv category-4">

Você pode usar a ferramenta de inspeção para ver quais classes CSS o WordPress adiciona à tag body. Aqui está um exemplo:

Você pode usar a classe CSS category-tv ou category-4 para estilizar apenas esta página de categoria de forma diferente.

Por exemplo, vamos adicionar uma imagem de fundo personalizada à página de arquivo de categoria.

Embora seja uma prática comum modificar o arquivo functions.php de um tema para adicionar código CSS, isso é inseguro e não é muito amigável para iniciantes. Um pequeno erro e você corre o risco de quebrar seu site.

É por isso que sempre recomendamos usar o WPCode em vez disso. É o melhor plugin para adicionar trechos de código personalizados sem muito esforço.

Usamos o WPCode para adicionar e gerenciar trechos de código em nossas marcas. Tem sido uma maneira simples e eficaz de nos mantermos organizados e manter as coisas funcionando sem problemas. Se você quiser saber mais, confira nossa análise detalhada do WPCode.

Para fazer isso, vamos instalar e ativar o plugin WPCode. Se precisar de ajuda, você pode conferir nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, basta navegar até Trechos de Código » + Adicionar Novo na sua área de administração do WordPress.

Na próxima tela, você desejará passar o mouse sobre a opção ‘Adicionar Seu Código Personalizado (Novo Trecho)’ e clicar no botão ‘Usar trecho’ quando ele aparecer.

Na próxima tela, você pode começar adicionando um título para o seu trecho de CSS personalizado. Você pode querer escolher algo simples e relevante, pois isso o ajudará a reconhecer o código mais tarde.

Depois disso, você pode digitar ou colar o seguinte CSS personalizado na caixa ‘Pré-visualização do Código’.

body.category-tv {
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

Não se esqueça de substituir a URL da imagem de fundo e a classe da categoria pelas de seu próprio site.

Veja como pode ficar no editor do WPCode:

Em seguida, você precisará definir o ‘Tipo de Código’ selecionando ‘Trecho de CSS’ no menu suspenso.

Quando tudo parecer bom, você pode alternar o controle deslizante para ativar o trecho de código e clicar em ‘Salvar Trecho.’

Além disso, você pode adicionar fundos personalizados a posts e páginas individuais.

O WordPress tem uma classe CSS com o ID do post ou página na tag body. Você pode usar o mesmo código CSS e apenas substituir .category-tv pela classe CSS específica do post.

Para mais detalhes, veja nosso tutorial sobre como adicionar CSS personalizado no WordPress.

Recursos Bônus: Guias de Arquivos de Imagem e Mídia para Melhorar a Experiência do Usuário do Site WordPress

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma imagem de fundo no WordPress. Você também pode querer ver nosso guia sobre:

• Como Adicionar Imagens Corretamente no WordPress
• Como Criar uma Galeria de Imagens no WordPress
• Como Criar um Slider de Vídeo e Imagem para WordPress
• Como Adicionar Miniaturas aos Links de Posts Anterior e Próximo no WordPress
• Como Incorporar Spotify no WordPress
• Como Incorporar o Apple Podcasts no WordPress
• O Melhor Software de Design de Sites
• Como Otimizar Imagens para Desempenho na Web Sem Perder Qualidade

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.