html - Positioning a box below an image background -
i got image , box working accordingly far. problem is, when go add height , goes instead of down. my fiddle - https://jsfiddle.net/kg6plk4e/ .post { height: 255px; font-size: 14px; position: relative; padding: 5px; margin-right: 3%; margin-top: 3%; } .box-one { background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg"); background-repeat: no-repeat; background-size: cover; } .image-text { position: absolute; width: 100%; margin: 0; left: 0; font-weight: bold; color: white; text-align: center; background: black; bottom: 0; padding: 5px; height: 40px; } <div class="late-post grid-60 tablet-grid-50 mobile-grid-100"> <div class="post box-one"> <h1>pottery</h1> <p class="image-text">lorem ipsum dummy text of print