Boa noite a todos!
Alguém sabe como colocar texto em cima da imagem? No caso, se quisessemos escrever sobre a umagem da barbearia, como poderiamos fazer isso?
Tentei utilizar no CSS a função background image, mas ao tentar dimensionar para a largura da pagina, aop invés de aumentar ele duplicou.
Atenciosamente Bruno
Olá, Bruno. Tem como fazer isso sim, vou te dar duas alternativas...
A primeira é trabalhar com a propriedade position, você pode colocar a imagem como position: relative; e o textp que você quiser sobrepor com position: absolute; Só fique ciente que vai ter que controlar propriedades como: left, top, botton, flex... Outra alternativa, mais simples, é você colocar a imagem como background-image, no próprio CSS, nesse caso, você pode colocar o que quiser por cima dela, tem algumas propriedades também, mas nada que uma pesquisa rápida não resolva. Abraço e bons estudos!
Oi Daniela, bom dia! Obrigado pelo retorno. Nas minhas pesquisas realmente encontrei estas duas opções, mas acabei tendo alguns dificuldades.
Na opção de trabalhar com position estou apanhando um pouco pra sobrepor o texto, mas acho que deve ser algum detalhe que deixei passar.
Na opção de background-image eu tive problema com a duplicação da imagem. Quando uso o width para colocar a imagem até o fim da tela, ela duplica e não amplia. Essa opção me parece mais simples de controlar o texto, mas esbarrei nesse problema da duplicação da imagem, que não consegui resolver ainda.
De qualquer forma agradeço a ajuda!
para a imagem não repetir você utiliza a propriedade background-repeat: no-repeat; link: https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
e relação com texto você pode controlar como position: absolute, colocando como elemento pai position: relative e o filho com position: absolute. Para preencher toda a largura se usa imagem for pequena usa background-size: cover;
