<style> .wrap { width: 100%; height:auto; margin: auto; text-align:center; position:relative; } .text_over_image { position: absolute; margin: auto; top: 0; left:0; right:0; bottom:0; color:#fff; height:100px; font-size:40px; width:600px; background: rgba(54, 25, 25, .5); padding-left:10px; padding-top:40px; padding-right:10px; max-width:80%; } </style> NOTE: the background colors are rgba because the .5 (the last number) indicates the opacity of the front text. <div class="wrap"> <img style='margin-left:-20px;height:625px; max-width: 110%; max-height:100%;' src='yourimage.jpg'> <div class="text_over_image">Account Management Website</div> </div> |
HTML/Javascript/CSS >