Olá! Preciso que uma imagem inserida através da tag img, seja o background de uma div que contém parágrafos, e que ajuste o tamanho da imagem conforme o tamanho da div, sem que eu precise inserir como background-image no css.
Preciso deixar responsivo e sempre no centro da tela o texto e imagem independente do tamanho da tela.
Muito obrigado.
Segue meu HTML e meu CSS.
HTML
<body>
<div class="container">
<div class="da">
<img class="imagem" src="IMG/imagem" alt="">
</div>
<div class="bloco-texto">
<p><span class="n1">1:</span> texto1</p>
<p><span class="n1">2:</span>texto2</p>
<p><span class="n1">3:</span>texto3</p>
<p><span class="n1">4:</span>texto4</p>
<p class="bloco-texto2">
texto5
</p>
</div>
</div>
</body>
Segue CSS
body {
background-color: black;
}
.container {
border: 1px white solid;
width: 90%;
height: auto;
margin: 0 auto;
}
.imagem {
max-width: 50%;
position: relative;
}
.bloco-texto {
border: 1px white solid;
color: white;
width: 70%;
height: auto;
text-align: center;
position: absolute;
}