Style overlay background image and add support for caption

_includes/page__hero.html

@@ -11,7 +11,7 @@
 {% endif %}
 
 <div class="page__hero{% if page.header.overlay_color or page.header.overlay_image %}--overlay{% endif %}"
-  style="background: {{ page.header.overlay_color | default: 'transparent' }} {% if overlay_img_path %}url('{{ overlay_img_path }}'){% endif %};"
+  style="{% if page.header.overlay_color %}background-color: {{ page.header.overlay_color | default: 'transparent' }};{% endif %} {% if overlay_img_path %}background-image: url('{{ overlay_img_path }}');{% endif %}"
 >
   {% if page.header.overlay_color or page.header.overlay_image %}
     <div class="wrapper">
@@ -26,8 +26,8 @@
     </div>
   {% else %}
     <img src="{{ img_path }}" alt="{{ page.title }}" class="page__hero-image">
+  {% endif %}
   {% if page.header.caption %}
     <span class="page__hero-caption">{{ page.header.caption | markdownify | remove: "<p>" | remove: "</p>" }}</span>
   {% endif %}
-  {% endif %}
 </div>

_posts/2012-03-15-template-header-overlay-image.md

@@ -2,6 +2,7 @@
 title: "Template: Header Image Overlay"
 header:
   overlay_image: unsplash-image-1.jpg
+  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
 categories:
   - Template
   - Uncategorized

assets/_scss/_page.scss

@@ -71,8 +71,11 @@
     padding: 3em 0;
     @include clearfix;
     text-align: center;
+    background-size: cover;
+    background-repeat: no-repeat;
 
-    .page__title {
+    .page__title,
+    .page__meta {
       color: #fff;
       text-shadow: 1px 1px 4px rgba(#000, 0.5);
     }