diff --git a/demos/component-docs/app.css b/demos/component-docs/app.css
index 78f0f3f998..8f9caa6f23 100644
--- a/demos/component-docs/app.css
+++ b/demos/component-docs/app.css
@@ -143,3 +143,28 @@ ion-card.cards-list-demo a > icon {
   color: #444444;
 }
 
+.adv-background {
+  position: relative;
+  text-align: center !important;
+}
+
+ion-card p.adv-background-title {
+  position: absolute;
+  top: 29%;
+  font-size: 2.0em;
+  width: 100%;
+  font-weight: bold;
+  color: #fff !important;
+
+
+}
+
+ion-card p.adv-background-subtitle {
+  font-size: 1.0em;
+  position: absolute;
+  top: 48%;
+  width: 100%;
+  color: #fff !important;
+
+}
+
diff --git a/demos/component-docs/cards/cards-background.html b/demos/component-docs/cards/cards-background.html
index d320f5d7f5..9785b15334 100644
--- a/demos/component-docs/cards/cards-background.html
+++ b/demos/component-docs/cards/cards-background.html
@@ -5,12 +5,34 @@
 
 <ion-content class="has-header components-demo">
 
-<ion-card>
+<ion-card class="adv-background">
+  <img src="img/card-amsterdam.png"/>
+  <p class="adv-background-title">Amsterdam</p>
+  <p class="adv-background-subtitle">64 Listings</p>
+</ion-card>
 
-  <ion-card-content>
-    This is just your basic card with some text to boot. Like it?  Keep scrolling...
-  </ion-card-content>
+<ion-card class="adv-background">
+  <img src="img/card-madison.png"/>
+  <p class="adv-background-title">Madison</p>
+  <p class="adv-background-subtitle">28 Listings</p>
+</ion-card>
 
+<ion-card class="adv-background">
+  <img src="img/card-portland.png"/>
+  <p class="adv-background-title">Portland</p>
+  <p class="adv-background-subtitle">31 Listings</p>
+</ion-card>
+
+<ion-card class="adv-background">
+  <img src="img/card-saopaolo.png"/>
+  <p class="adv-background-title">São Paulo</p>
+  <p class="adv-background-subtitle">41 Listings</p>
+</ion-card>
+
+<ion-card class="adv-background">
+  <img src="img/card-sf.png"/>
+  <p class="adv-background-title">San Francisco</p>
+  <p class="adv-background-subtitle">72 Listings</p>
 </ion-card>
 
 
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index 00f9ebb450..7a527d507e 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -75,7 +75,7 @@ export function getPageFor(hash) {
         'card-header': CardsHeaderPage,
         'card-list': CardsListPage,
         'card-image': CardsImagePage,
-        'card-background-image': CardsBackgroundPage,
+        'card-background': CardsBackgroundPage,
         'card-advanced-map': CardsAdvancedMapPage,
         'card-advanced-social': CardsAdvancedSocialPage,
         'card-advanced-image': CardsAdvancedImagePage,
diff --git a/demos/component-docs/img/card-amsterdam.png b/demos/component-docs/img/card-amsterdam.png
new file mode 100644
index 0000000000..2f45800044
Binary files /dev/null and b/demos/component-docs/img/card-amsterdam.png differ
diff --git a/demos/component-docs/img/card-madison.png b/demos/component-docs/img/card-madison.png
new file mode 100644
index 0000000000..418dca560c
Binary files /dev/null and b/demos/component-docs/img/card-madison.png differ
diff --git a/demos/component-docs/img/card-portland.png b/demos/component-docs/img/card-portland.png
new file mode 100644
index 0000000000..3c43719393
Binary files /dev/null and b/demos/component-docs/img/card-portland.png differ
diff --git a/demos/component-docs/img/card-saopaolo.png b/demos/component-docs/img/card-saopaolo.png
new file mode 100644
index 0000000000..a9e7b7894c
Binary files /dev/null and b/demos/component-docs/img/card-saopaolo.png differ
diff --git a/demos/component-docs/img/card-sf.png b/demos/component-docs/img/card-sf.png
new file mode 100644
index 0000000000..3e101f6a43
Binary files /dev/null and b/demos/component-docs/img/card-sf.png differ