Skip to main content
Design System 2
University Relations
Contribute

Background Positioning

You can position background images using wvu-bg-position-{direction} or wvu-bg-position-m-{direction} (for mobile screen sizes).

  • wvu-bg-position-center
  • wvu-bg-position-bottom
  • wvu-bg-position-top
  • wvu-bg-position-left
  • wvu-bg-position-right
  • wvu-bg-position-m-center
  • wvu-bg-position-m-bottom
  • wvu-bg-position-m-top
  • wvu-bg-position-m-left
  • wvu-bg-position-m-right

Examples

wvu-bg-position-top
wvu-bg-position-bottom
wvu-bg-position-center
wvu-bg-position-right
wvu-bg-position-left 
<div class="d-flex align-items-stretch">
    <div class="wvu-bg-size-cover w-25 py-5 text-center text-white wvu-bg-position-top"
      style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        <span class="wvu-z-index-content">wvu-bg-position-top</span>
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-bottom"
      style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        wvu-bg-position-bottom
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-center"
      style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        wvu-bg-position-center
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-right"
      style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        <span class="wvu-z-index-content">wvu-bg-position-right</span>
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-left"
      style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        <span class="wvu-z-index-content">wvu-bg-position-left</span>
    </div>
</div>

Background Positioning on Small Viewports

Sometimes on smaller screen sizes, no matter how you position your background image, the image will be obscured by text. We’ve created some additional classes to fix this problem. Use wvu-bg-position-spacer-top or wvu-bg-position-spacer-bottom to give yourself some extra padding above or below the photo in order to show the subject of the photo on sm screen sizes, or wvu-bg-position-spacer-md-topor wvu-bg-position-spacer-md-bottom for md and below.

  • wvu-bg-position-spacer-top
  • wvu-bg-position-spacer-md-top
  • wvu-bg-position-spacer-bottom
  • wvu-bg-position-spacer-md-bottom