Image Overlay CSS

My friend wanted a simple way of overlaying an image (or text) on an image, ideally using CSS. After a quick google I found a nice looking example of what he was after. Juts going to post it here so I have it for future reference.



<div class="image">
 <img src=""/>
 <h2><span>Roseberry Topping</span></h2>


.image {
 position: relative;
 width: 100%; /* for IE 6 */

h2 {
 position: absolute;
 top: 200px;
 left: 0;
 width: 100%;

h2 span {
 color: white;
 font: bold 24px/45px Helvetica, Sans-Serif;
 letter-spacing: -1px;
 background: rgb(0, 0, 0); /* fallback color */
 background: rgba(0, 0, 0, 0.7);
 padding: 10px;


Leave a Reply

Your email address will not be published. Required fields are marked *