Staffordshire University Components

Masthead: Default

Use an inline style on the <img> element to add a focal point to your responsive image, to stop subjects from being cropped on resize.

eg. style="object-position: 60% 20%" would indicate the focal point is approximately 60% along the x-axis from the left, and 20% down the y-axis from the top.

Use srcset to serve smaller images to smaller screens, this is right at the top of the page, and will affect performance.

<div class="masthead">
    <div class="masthead__inner">
        <div class="masthead__bg">
            <img src="../../img/masthead5.jpg" />
        </div>
        <div class="wrap">
            <nav class="breadcrumbs">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Level 1</a>
                    </li>
                    <li>
                        <a href="#">Level 2</a>
                    </li>
                </ul>
            </nav>

            <div class="title  title--has-tail  js-waypoint">
                <h1 class="title__highlight  h1">
                    Page Title
                </h1>
            </div>

            <div class="title  title--bg-white  title--has-tail  js-waypoint">
                <h6 class="title__highlight">
                    (If long, consider using h2 textElementStyle)
                </h6>
            </div>

        </div>
    </div>
</div>
 
<div class="masthead">
  <div class="masthead__inner">
    <div class="masthead__bg">
      {% if bgImg %}
        {{ bgImg }}
      {% else %}
        <img src="{{ ('/img/masthead' ~ random(9) ~ '.jpg') | path }}"/>
      {% endif %}
    </div>
    <div class="wrap">
      {% include '@breadcrumbs' %}

      {% include '@title' with {
        text: 'Page Title',
        modifiers: ['has-tail'],
        textElement: 'h1',
        textElementStyle: 'h1',
        animate: true
      } %}
      {% include '@title' with {
        text: '(If long, consider using h2 textElementStyle)',
        modifiers: ['bg-white', 'has-tail'],
        textElement: 'h6',
        animate: true
      } %}
    </div>
  </div>
</div>
  • Content: 
    .masthead {
  $overlay-breakpoint: $third-breakpoint + 10rem;

  display: flex;
  flex-wrap: wrap;
  background-color: $offwhite;
  box-sizing: border-box;
  position: relative;

  &__bg {
    // should use an abs:pos div with responsive image rather than background image
    // CG: This is an additional comment
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;

    img {
      @supports (object-fit: cover) {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        object-fit: cover;
        object-position: 60% 35%; // we're going to assume the image's focal point is roughly slightly-above-center right, but specify this as an inline style for each image
      }
    }

    &--blurred {
      overflow: hidden;

      img {
        transform: scale(1.1);
        filter: blur(1em);
      }
      @media (min-width: $overlay-breakpoint) {
        display: none; // this full-viewport filter is actually quite process intensive, so get rid as soon as it's not needed
      }
    }
  }

  &__inner {
    display: flex;
    flex-wrap: wrap;
    min-height: 65vmin;
    padding: 12rem 0 $spacing-xl;
    align-self: flex-end;
    align-content: flex-end;
    width: 100%;
    position: relative;
    box-sizing: border-box;

    @media (min-width: $overlay-breakpoint) {
      position: static;
    }
  }

  &__overlay {
    align-self: flex-end;
    align-content: flex-end;
    width: 100%;
    padding: $spacing-lg 0 0;
    box-sizing: border-box;
    background: black;
    color: white;
    z-index: 1;

    @media (min-width: $overlay-breakpoint) {
      background: none;
      padding: 0;
      margin-bottom: $spacing-lg;

      &Inner {
        margin: 0 -#{$grid-gutter};
        padding: $spacing-lg $grid-gutter 0;
        background: rgba(black, 0.75);
        @supports (backdrop-filter: blur(1em)) {
          background: rgba(black, 0.6);
        }
        backdrop-filter: blur(1em);
      }
    }
  }

  &--has-blurredBg {
    .masthead__overlay {
      background: rgba(black, 0.75);
      @supports (backdrop-filter: blur(1em)) {
        background: rgba(black, 0.6);
      }

      @media (min-width: $overlay-breakpoint) {
        background: none;
      }
    }
  }

  .wrap {
    position: relative;
    align-self: flex-end;
    z-index: 0;
  }

  &--shallow {
    .masthead__inner {
      min-height: 40vh;
    }
  }
}
  • URL: /components/raw/masthead/_masthead.scss
  • Filesystem Path: src/components/masthead/_masthead.scss
  • Size: 2.5 KB