diff --git a/src/img/docs/demo.html b/src/img/docs/demo.html
index 47c329c..ecca1f6 100644
--- a/src/img/docs/demo.html
+++ b/src/img/docs/demo.html
@@ -1,6 +1,6 @@
 <div ng-controller="ImageDemoCtrl">
   <ul class="thumbnails">
-    <li class="span3"><a class="thumbnail"><img ph-img="260x196" /></a></li>
+    <li class="span3"><a class="thumbnail"><img ph-img="260x196"/></a></li>
     <li class="span2"><a class="thumbnail"><img ph-img="160x83" /></a></li>
     <li class="span1"><a class="thumbnail"><img ph-img="60x83" /></a></li>
     <li class="span2"><a class="thumbnail"><img ph-img="160x83" /></a></li>
@@ -8,8 +8,8 @@
   </ul>
   <hr />
   <div>
-    <h3>It Can Also Do a CSS Background</h3>
-    <div ph-img="550x100" style="width: 550px; height: 100px; background-repeat: no-repeat;">
+    <h3>It Can Also Do a CSS Background and with the 'title' as text</h3>
+    <div ph-img="550x100" title="Wide Image" style="width: 550px; height: 100px; background-repeat: no-repeat;">
       <h4>Oooh...</h4>
     </div>
   </div>
diff --git a/src/img/img.js b/src/img/img.js
index 1869469..ffd2c07 100644
--- a/src/img/img.js
+++ b/src/img/img.js
@@ -29,7 +29,7 @@ angular.module( 'placeholders.img', [] )
 .directive( 'phImg', function () {
   return {
     restrict: 'A',
-    scope: { dimensions: '@phImg' },
+    scope: { dimensions: '@phImg', title: '@' },
     link: function( scope, element, attr ) {
       // A reference to a canvas that we can reuse
       var canvas;
@@ -64,9 +64,9 @@ angular.module( 'placeholders.img', [] )
         
         // Grab the provided dimensions.
         scope.size = { w: matches[1], h: matches[2] };
-
-        // FIXME: only add these if not already present
-        element.prop( "title", scope.dimensions );
+        if(! element.prop('title')){
+          element.prop( "title", scope.dimensions );
+        }
         element.prop( "alt", scope.dimensions );
 
         // And draw the image, getting the returned data URL.
@@ -123,7 +123,11 @@ angular.module( 'placeholders.img', [] )
         // TODO: support configurable font
         // FIXME: ensure text will fit and resize if it doesn't
         text_size = getTextSize();
-        text = scope.dimensions;
+        if(scope.title){
+          text = scope.title;
+        } else {
+          text = scope.dimensions;
+        }
         context.fillStyle = config.text_color;
         context.textAlign = 'center';
         context.textBaseline = 'middle';
@@ -136,7 +140,7 @@ angular.module( 'placeholders.img', [] )
         }
 
         // Finally, draw the text in its calculated position.
-        context.fillText( scope.dimensions, scope.size.w / 2, scope.size.h / 2 );
+        context.fillText( text, scope.size.w / 2, scope.size.h / 2 );
 
         // Get the data URL and return it.
         return canvas.toDataURL("image/png");
diff --git a/src/img/test/imgSpec.js b/src/img/test/imgSpec.js
index 4d81c25..26e2da9 100644
--- a/src/img/test/imgSpec.js
+++ b/src/img/test/imgSpec.js
@@ -28,7 +28,7 @@ describe( 'phImg', function () {
   it( 'should add the title and alt attributes', inject( function () {
     var dimensions = scope.w+'x'+scope.h;
     expect( element.prop( 'alt' ) ).toBe( dimensions );
-    expect( element.prop( 'title' ) ).toBe( dimensions );
+    expect( element.prop( 'title' ) ).toBe( dimensions || scope.title);
   }));
 
   it( 'should set the CSS `background-image` property if tag is not an img', inject( function () {