Posts tagged image

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;


i <3 Content Aware Fill

ew of the photos of my bungee jump had some boat masts in the foreground, and I wanted them out. As ive got a copy of CS5 on my laptop I thought i’d give photoshopping the image ago. I thought it wouldnt come out too good tbh, but was just interested at how well it would have coped. It coped very well :D

Below is the original picture.

and now the photoshopped version.

It isnt perfect but for 15 minutes work I didnt think it was bad :)