Skip to main content

Overlays

Overlays can be used to shade a block. They're typically used in conjunction with a block containing an image wrapped with the "background-image" class. When using an overlay, it's helpful to also set the block's background color with a background color class, so that the block inherits font colors and styles correctly. For example, for a blue background block, use class="blue-bg blue-overlay"

Blue​

This block has a blue overlay.

aerial view of campus
<div class="wwu-banner blue-overlay">
  <div class="body"><p>This block has a blue overlay.</p></div>
  <div class="background-image">
    <img src="img-src.jpg" alt="descriptive alt text">
  </div>
</div>

Dark-Blue​

This block has a dark blue overlay.

aerial view of campus
<div class="wwu-banner dark-blue-overlay">
  <div class="body"><p>This block has a dark blue overlay.</p></div>
  <div class="background-image">
    <img src="img-src.jpg" alt="descriptive alt text">
  </div>
</div>

Black​

This block has a black overlay.

aerial view of campus
<div class="wwu-banner black-overlay min-height--25vh">
  <div class="body"><p>This block has a black overlay.</p></div>
  <div class="background-image">
    <img src="img-src.jpg" alt="descriptive alt text">
  </div>
</div>

Gray​

This block has a gray overlay.

aerial view of campus
<div class="wwu-banner gray-overlay">
  <div class="body"><p>This block has a gray overlay.</p></div>
  <div class="background-image">
    <img src="img-src.jpg" alt="descriptive alt text">
  </div>
</div>