Skip to main content

Background Positioning

You can position background images use wvu-bg-position-{direction}, wvu-bg-position-{direction}-{direction} or wvu-bg-position-{direction}-{direction}--{value} where direction is either center, top, bottom, right, or left; and value is a number 5 - 100 in increments of 5 (5, 10, 15, 20, etc.). These values correspond to a percentage equal to the width of your image, and will move the background image left or right this percentage, but not up or down.

Other breakpoints should use the following format:

wvu-bg-position-{breakpoint}-{direction}-{direction}--{value} for xs, sm, md, and lg.

For example, wvu-bg-position-sm-center-right--80 would move the background rightward 80% of the image’s width for viewport sizes above sm. Here are the available utilities:

  • wvu-bg-position-center
  • wvu-bg-position-bottom
  • wvu-bg-position-top
  • wvu-bg-position-left
  • wvu-bg-position-right
  • wvu-bg-position-{breakpoint}-center
  • wvu-bg-position-{breakpoint}-bottom
  • wvu-bg-position-{breakpoint}-top
  • wvu-bg-position-{breakpoint}-left
  • wvu-bg-position-{breakpoint}-right
  • wvu-bg-position-{breakpoint}-center-left
  • wvu-bg-position-{breakpoint}-center-right
  • wvu-bg-position-{breakpoint}-top-left
  • wvu-bg-position-{breakpoint}-top-right
  • wvu-bg-position-{breakpoint}-bottom-left
  • wvu-bg-position-{breakpoint}-bottom-right
  • wvu-bg-position-{breakpoint}-bottom-right
  • wvu-bg-position-{breakpoint}-center-left--{value}
  • wvu-bg-position-{breakpoint}-center-right--{value}
  • wvu-bg-position-{breakpoint}-top-left--{value}
  • wvu-bg-position-{breakpoint}-top-right--{value}
  • wvu-bg-position-{breakpoint}-bottom-left--{value}
  • wvu-bg-position-{breakpoint}-bottom-right--{value}

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>
wvu-bg-position-center-left--20
wvu-bg-position-sm-center-left--40
wvu-bg-position-lg-center-left--60
wvu-bg-position-xl-center-left--80
<div class="d-flex align-items-stretch">
    <div class="wvu-bg-size-cover w-25 py-5 text-center text-white wvu-bg-position-center-left--20" 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-center-left--20</span>
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-sm-center-left--40" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
        wvu-bg-position-sm-center-left--40
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-lg-center-left--60" 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-lg-center-left--60</span>
    </div>
    <div class="wvu-bg-size-cover w-25 text-white text-center py-5 wvu-bg-position-xl-center-left--80" 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-xl-center-left--80</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