Como colocar texto em cima de uma imagem em HTML

A forma mais comum de sobrepor texto a uma imagem em HTML é com CSS position. A lógica é simples: um elemento pai com position: relative serve de referência, e o texto com position: absolute é posicionado livremente dentro desse espaço.

<div class="container">
  <img src="imagem.jpg" alt="Descrição da imagem">
  <p class="texto">Texto sobre a imagem</p>
</div>

.container {
  position: relative;
  display: inline-block;
}

.texto {
  position: absolute;
  top: 20px;
  left: 20px;
  color: white;
}

É o código mínimo que funciona. As seções abaixo cobrem como centralizar, como garantir legibilidade e como fazer funcionar no mobile.

Por que o texto precisa de um container com position: relative

Sem o position: relative no container, o position: absolute do texto vai se basear no elemento mais próximo que tenha posicionamento definido, geralmente a janela do navegador. O texto aparece fora do lugar ou sobre outro elemento da página.

O container relative cria uma caixa de referência para o elemento absolute filho. Qualquer valor de top, left, right ou bottom no texto passa a ser contado a partir das bordas desse container.

Se você está colocando o código correto mas o texto não aparece sobre a imagem, verifique se o position: relative está no elemento pai direto.

Como centralizar o texto sobre a imagem

Para posicionar o texto exatamente no centro da imagem em qualquer tamanho de tela:

.texto {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

O top: 50% e left: 50% posicionam o canto superior esquerdo do texto no centro da imagem. O transform: translate(-50%, -50%) desloca o texto de volta na metade da sua própria largura e altura, centralizando-o de verdade.

O canal CFBCursos, explica visualmente como o position absolute se comporta dentro de um container relativo — é a aula mais clara sobre esse conceito em português:

Como garantir que o texto seja legível sobre qualquer imagem

Texto branco sobre área clara ou texto escuro sobre área escura compromete a leitura. Existem três técnicas para garantir contraste:

Sombra no texto:

.texto {
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

Fundo semitransparente no texto:

.texto {
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 4px;
}

Overlay escuro sobre a imagem inteira:

.container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}

.texto {
  position: absolute;
  z-index: 1; /* coloca o texto acima do overlay */
  color: white;
}

O overlay é útil quando você precisa que o texto seja sempre legível independentemente do conteúdo da imagem.

Comparação dos 3 métodos para sobrepor texto

CSS Grid como alternativa:

.container {
  display: grid;
}

.container img,
.container .texto {
  grid-area: 1 / 1; /* ambos ocupam a mesma célula */
}

.container .texto {
  align-self: center;
  justify-self: center;
  color: white;
  z-index: 1;
}

O CSS Grid elimina a necessidade de position: absolute e mantém os dois elementos no fluxo normal do documento, o que facilita a acessibilidade.

Background-image como alternativa:

.container {
  background-image: url('imagem.jpg');
  background-size: cover;
  background-position: center;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Neste caso o texto é filho direto do container e fica centralizado com flexbox. A imagem fica como decoração de fundo. A desvantagem é que imagens de fundo CSS não são indexadas pelos buscadores como conteúdo de imagem.

Responsividade: como o texto acompanha a imagem em mobile

Com position: absolute e valores fixos em pixels, o texto pode sair da posição em telas menores. Para corrigir:

Usando porcentagem:

.texto {
  position: absolute;
  top: 10%;
  left: 5%;
  font-size: 4vw; /* escala com a largura da tela */
}

Com clamp() para texto responsivo:

.texto {
  font-size: clamp(14px, 3vw, 28px);
}

O clamp(mínimo, ideal, máximo) define um tamanho mínimo, um valor relativo à tela e um máximo. O texto cresce e diminui com a tela sem nunca ficar pequeno demais ou grande demais.

Empilhando no mobile com media query:

@media (max-width: 600px) {
  .container {
    display: block;
  }
  
  .texto {
    position: static;
    background-color: #333;
    color: white;
    padding: 12px;
  }
}

Em telas pequenas, mover o texto para baixo da imagem como elemento estático pode ser melhor do que forçar a sobreposição.

Para mais contexto sobre como trabalhar imagens em HTML, veja como adicionar uma imagem no HTML e para entender como o elemento div funciona como container nesses layouts, veja o que é uma div em HTML.

Erros comuns e como resolver

O texto aparece atrás da imagem: verifique o z-index. A imagem pode ter um z-index implícito maior. Adicione z-index: 1 ou z-index: 2 no texto e certifique-se que o container tem position: relative.

O texto sai da área da imagem: o container deve ter overflow: hidden se você não quer que o texto ultrapasse as bordas da imagem.

.container {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

O container não envolve a imagem: se você usou display: inline-block e a imagem ainda ultrapassa o container, verifique se a imagem tem display: block. Imagens inline têm um espaço extra embaixo por padrão que pode causar esse comportamento.

.container img {
  display: block;
}

O texto não fica centralizado no mobile: com left: 50% e transform: translate(-50%, -50%), o texto pode criar scroll horizontal em telas estreitas se for largo. Adicione width: 90% e max-width: 400px no texto para limitar a largura.

Perguntas frequentes

Como colocar texto em cima de imagem sem CSS?

Não é possível de forma limpa sem CSS. HTML puro não tem mecanismo de sobreposição de elementos. A propriedade CSS position é a forma padrão e mais compatível para esse efeito.

Posso colocar texto em cima de uma imagem de fundo?

Sim. Se a imagem está aplicada como background-image no CSS, o texto fica naturalmente por cima. Basta posicionar o texto dentro do elemento com a imagem de fundo usando flexbox ou posicionamento. Veja como adicionar imagem de fundo em como colocar imagem de fundo no HTML.

Como fazer o texto não sumir sobre imagens claras?

Use text-shadow, background-color com RGBA no próprio texto ou um overlay semitransparente sobre a imagem. O text-shadow: 1px 1px 3px rgba(0,0,0,0.8) já resolve a maioria dos casos.

Qual método é melhor para acessibilidade?

O método com position: absolute ou CSS Grid usando a tag <img> real é o mais acessível porque a imagem tem alt text e é lida por leitores de tela. Usar background-image no CSS perde essa informação. Para conteúdo relevante, prefira a tag <img> com alt descritivo.

Como testar o código sem montar um site inteiro?

Acesse o CodePen ou o JSFiddle e cole o HTML e CSS diretamente no editor online. O resultado aparece em tempo real sem precisar criar nenhum arquivo local.