Page Header with Image Complete

  <header class="c-page-header c-page-header__simple u-theme--background-color--dark c-background-image blended u-background--cover u-gradient--bottom">
          <style type="text/css">
        .c-background-image {
          background-image: url(//placeimg.com/600/300/nature);
        }
        @media(min-width: 900px) {
          .c-background-image {
            background-image: url(//placeimg.com/900/400/nature);
          }
        }
        @media(min-width: 1100px) {
          .c-background-image {
            background-image: url(//placeimg.com/1400/500/nature);
          }
        }
      </style>
        <div class="c-page-header__simple--inner u-padding">
            <h1 class="u-font--primary--xxl u-color--white"><a class="u-link--white u-link-hover--white" href="">Lorem Ipsum</a></h1>
    </div>
  </header> <!-- /.header__swath -->

{% if page_header %}
  <header class="c-page-header c-page-header__simple u-theme--background-color--dark {{ page_header.page_header_class }}">
    {% if page_header.has_image %}
      <style type="text/css">
        .c-background-image {
          background-image: url({{ page_header.img_url_s | raw }});
        }
        @media(min-width: 900px) {
          .c-background-image {
            background-image: url({{ page_header.img_url_m | raw }});
          }
        }
        @media(min-width: 1100px) {
          .c-background-image {
            background-image: url({{ page_header.img_url_l | raw }});
          }
        }
      </style>
    {% endif %}
    <div class="c-page-header__simple--inner u-padding">
      {%  if page_header.kicker %}<span class="o-kicker u-color--white">{{ page_header.kicker | raw }}</span> {% endif %}
      <h1 class="u-font--primary--xxl u-color--white"><a class="u-link--white u-link-hover--white" href="">{{ page_header.title }}</a></h1>
    </div>
  </header> <!-- /.header__swath -->
{% endif %}