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
<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>
<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