Como colocar uma imagem de background dinâmica em React.js

Neste artigo você vai aprender a como colocar uma imagem de background dinâmica em React, utilizando variáveis

Fala programador(a), beleza? Bora aprender mais sobre imagens e estilos inline no React!

A melhor maneira de adicionar uma imagem de background com o React é utilizando as template strings

Que com os back ticks deixam uma string dinâmica

Veja um exemplo:

backgroundImage: `url(${imageUrl})`

No caso acima temos a propriedade de background image utilizando uma variável para colocar a imagem

A variável imageUrl deve conter o caminho até a imagem

Aplicado a uma tag teremos:

<div style={{background: `url(${imageUrl})`}}></div>

O que dá o mesmo resultado do exemplo anterior, mas aqui estamos utilizando no meio do JSX

Com estas duas abordagens você já deve conseguir o que precisa 🙂

Basta escolher qual delas é melhor para o seu projeto

Conclusão

Neste artigo você viu como imagem de background dinâmica em React

Utilizamos a propriedade backgroundImage com o valor de dentro da propriedade url dinâmico, com uma variável

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

A forma mais fácil de atingir isso é com o recurso de template strings

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Background ou backgroundImage? Qual dos dois usar:

Os dois chegam no mesmo resultado visual, o que muda é o tanto de controle que tu tem

background é o atalho, ele aceita imagem, cor, posição e repetição tudo de uma vez

O detalhe é que atalho ZERA o que tu não escreveu, então se o elemento já tinha uma cor de fundo definida antes, ela some

backgroundImage é a propriedade específica, ela mexe só na imagem e deixa o resto do estilo em paz

Na prática: elemento simples, só a imagem, manda o background numa linha

Elemento que já tem cor de fundo ou outra config vinda do CSS, vai de backgroundImage pra não atropelar o que já estava lá 🙂

Ajustando tamanho, posição e repetição do background:

Colocar a imagem é a parte fácil, o problema costuma ser ela aparecer cortada, repetida ou esticada

Como estamos no estilo inline, tudo isso vira propriedade do mesmo objeto, em camelCase

[bloco de código] const estilo = { backgroundImage: url(${imageUrl}), backgroundSize: ‘cover’, backgroundPosition: ‘center’, backgroundRepeat: ‘no-repeat’, height: ‘400px’ }

<div style={estilo}></div>

Repara que eu tirei o objeto de dentro do JSX e joguei numa variável

Fica muito mais legível quando são várias propriedades, e o JSX volta a ser só JSX

O cover faz a imagem cobrir a área toda mesmo que precise cortar as bordas, o center centraliza o recorte e o no-repeat impede aquele efeito de mosaico

Tome cuidado com a altura! Uma div vazia não tem altura nenhuma, e sem altura não tem onde a imagem aparecer

Se o elemento já tem conteúdo dentro (texto, cards, o que for), tu pode tirar o height e deixar o conteúdo empurrar o tamanho

Trocando a imagem em tempo real, com props e state:

A graça do dinâmico é justamente a imagem não ser sempre a mesma, né?

Como o valor vem de uma variável, dá na mesma se ela chegou por props, por state ou de uma resposta da API

Recebendo por props, o componente vira reaproveitável:

[bloco de código] function Banner({ imageUrl }) { return ( <div style={{ backgroundImage: url(${imageUrl}), backgroundSize: ‘cover’, backgroundPosition: ‘center’, height: ‘300px’ }}></div> ) }

Aí é só usar <Banner imageUrl={imagemDoUsuario} /> em qualquer lugar

E com state, a imagem muda sozinha quando o valor muda:

[bloco de código]

return ( <> <div style={{ backgroundImage: url(${imagem}), backgroundSize: ‘cover’, height: ‘300px’ }}></div> <button onClick={() => setImagem(outraImagem)}>Trocar capa</button> </> )

Não tem segredo nenhum aqui, a template string continua igualzinha

O que muda é só de onde vem o valor da variável, e essa é a parte massa: o mesmo código serve pro banner do perfil, pro card do produto e pra capa que o usuário fez upload

A imagem não aparece? Confira estes pontos:

Esse é o momento em que todo mundo trava, então bora pela ordem dos suspeitos

Elemento sem altura: div vazia tem zero de altura, coloca um height ou põe conteúdo dentro

Aspas no lugar das crases: se tu escrever ‘url(${imageUrl})’ com aspas simples, a variável não é interpolada e vira texto literal, tem que ser crase mesmo

Propriedade em camelCase: no objeto é backgroundImage e backgroundSize, o hífen do CSS não vale aqui

Caminho errado na variável: joga um console.log(imageUrl) e abre esse valor direto no navegador, se não abrir lá também, o problema é o caminho e não o React

Nome de arquivo com espaço ou parênteses: envolve o valor em aspas dentro do url, tipo url("${imageUrl}")

Já me ferrei uma vez com um nome de arquivo cheio de espaço, perdi um tempão olhando pro componente quando o culpado era a imagem 😛

Perguntas rápidas sobre background dinâmico no React:

Dá pra usar imagem da pasta pública e imagem importada do mesmo jeito?

Dá sim, porque o código não sabe (e nem se importa) de onde veio o valor

Se a variável guarda um caminho válido pro navegador, a template string monta a url igual nos dois casos

Posso usar uma imagem que vem da API?

Pode, é o mesmo esquema: guarda a URL que a API devolveu numa variável ou no state e joga dentro do url()

Só vale tratar o caso da URL vir vazia, senão tu monta um url() sem nada e o elemento fica sem fundo

Dá pra colocar duas imagens ou uma cor por cima da imagem?

Dá, o valor de background aceita mais de uma camada separada por vírgula, e é assim que se faz aquele escurecido em cima da foto pra deixar o texto legível

A ordem importa: o que vem primeiro fica por cima

E se forem muitos estilos, ainda vale o inline?

Pra imagem dinâmica sim, porque o valor muda em tempo de execução e precisa vir do JavaScript

O resto (tamanho, cor, borda, tudo que é fixo) tu pode deixar no seu CSS normal e usar o inline só pro backgroundImage, fica bem mais limpo