CSS to overlay text on top of a background image



<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>


Comments