diff --git a/_includes/page-intro.html b/_includes/page-intro.html
index 7e18520..ff3f925 100644
--- a/_includes/page-intro.html
+++ b/_includes/page-intro.html
@@ -1,4 +1,15 @@
 <header id="intro">
+  {% if page.image %}
+    {% assign intro_image = page.image.path | default: page.image %}
+    {% unless intro_image contains '://' %}
+      {% assign intro_image = intro_image | relative_url %}
+    {% endunless %}
+    {% assign intro_image = intro_image | escape %}
+    <div class="intro-image">
+      <img src="{{ intro_image }}" alt="{{ page.title }}">
+    </div>
+  {% endif %}
+
   <div class="inner">
     <div class="intro-text">
       <h1 class="intro-title">{{ page.alt_title | default: page.title | default: site.title | markdownify | strip_html }}</h1>
diff --git a/_sass/basically-basic/_intro.scss b/_sass/basically-basic/_intro.scss
index b18c910..1733094 100644
--- a/_sass/basically-basic/_intro.scss
+++ b/_sass/basically-basic/_intro.scss
@@ -8,6 +8,16 @@
   padding-bottom: 2rem;
 }
 
+.intro-image {
+  position: relative;
+  margin-top: -3rem; /* compensate for intro top margin */
+  margin-bottom: 2rem;
+
+  img {
+    width: 100%;
+  }
+}
+
 .intro-text {
 
   /* remove space after last child element */
diff --git a/example/_posts/2012-03-14-layout-intro-image.md b/example/_posts/2012-03-14-layout-intro-image.md
new file mode 100644
index 0000000..b1bd4b2
--- /dev/null
+++ b/example/_posts/2012-03-14-layout-intro-image.md
@@ -0,0 +1,26 @@
+---
+title: "Layout: Intro Image"
+image: /assets/images/eder-oliveira-180877.jpg
+categories:
+  - Layout
+tags:
+  - content
+  - image
+  - layout
+last_modified_at: 2017-03-13T22:06:24-04:00
+---
+
+This post should display an image in the introductory section of a page.
+
+This post tests a horizontal image using the following YAML Front Matter:
+
+```yaml
+image: /assets/images/eder-oliveira-180877.jpg
+```
+
+Intro images can also be assigned like this:
+
+```yaml
+image:
+  path: /assets/images/eder-oliveira-180877.jpg
+```
\ No newline at end of file
diff --git a/example/assets/images/amine-ounnas-180287.jpg b/example/assets/images/amine-ounnas-180287.jpg
new file mode 100644
index 0000000..14b5185
Binary files /dev/null and b/example/assets/images/amine-ounnas-180287.jpg differ
diff --git a/example/assets/images/eder-oliveira-180877.jpg b/example/assets/images/eder-oliveira-180877.jpg
new file mode 100644
index 0000000..b0d5016
Binary files /dev/null and b/example/assets/images/eder-oliveira-180877.jpg differ
diff --git a/example/assets/images/markus-spiske-207946.jpg b/example/assets/images/markus-spiske-207946.jpg
deleted file mode 100644
index 2f6de59..0000000
Binary files a/example/assets/images/markus-spiske-207946.jpg and /dev/null differ
diff --git a/example/index.html b/example/index.html
index abc4633..8de113f 100644
--- a/example/index.html
+++ b/example/index.html
@@ -3,7 +3,7 @@ layout: home
 paginate: true
 alt_title: "Basically Basic"
 sub_title: "The name says it all"
-image: assets/images/markus-spiske-207946.jpg
+image: /assets/images/amine-ounnas-180287.jpg
 introduction: |
     Basically Basic is a Jekyll theme meant to be a substitute for the default `jekyll new` theme --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
 actions: