buonasera a tutti,

ho un problema e non capisco come mai mi succede

ho questo style

codice:
 .image {
  position: relative;
  height: 20%;
  margin-top: 0px;
  overflow: hidden;
}
.image img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
se io metto

codice:
<div class="image"><img src="..."></div>
una volta sola nella pagina mi funziona correttamente, se invece lo metto più volte nella stessa pagina quindi per esempio:

codice:
<div>
<p>....</p>
</div>
<div class="image"><img src="..."></div>
<div>
<p>.....</p>
<div class="image"><img src="..."></div>
il secondo paralasse non ha la stessa funzionalità del primo, come mai??

casomai pensavo, ma non si può fare in modo che lo sfondo dietro sia uno esteso in widht 100% e height auto, e il contenuto davanti scorre in giù in modo che se lascio degli spazi vuoti mi vedere lo sfondo dietro?