Olá, Jonatas! Como vai?

Adicionar imagens ao placeholder de um input pode ser um pouco complicado, especialmente quando se trata de responsividade. Uma outra abordagem pode ser usar pseudo-elementos CSS como ::before ou ::after para inserir a imagem, em vez de usar o background-image diretamente no input. Isso pode te dar mais controle sobre o posicionamento e a responsividade.

Vou deixar um exemplo de como você pode fazer isso:

.input-container {
  position: relative;
}

.input-container input {
  padding-left: 70px; /* Ajuste conforme necessário */
  height: 50px;
  width: 200px;
}

.input-container::before {
  content: url('sua_imagem_aqui.png');
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* Para não interferir na interação com o input */
}

E no HTML:

<div class="input-container">
  <input type="text" placeholder="Qual será sua próxima leitura?">
</div>

Essa abordagem permite que você ajuste a posição da imagem facilmente. Vou deixar também um exemplo no CodePen com o resultado do exemplo.

Espero ter ajudado!

Siga firme nos seus estudos e conte com o fórum sempre que precisar!

Abraços :)

Perfeito! Muito obrigado pela solução e didática!