Background Effects
Utilities
If you are a developer making custom themes and components, the WVU Design System offers utilities that let you add a luminosity effect to a background photo.
Use background color effects to create interesting WVU-branded elements. For example, use
wvu-bg-blend-mode-luminosity with a background color to add a luminosity effect to a background image. Make sure the background element is inside of a container with a position-relative utility added.
<div class="bg-wvu-sunset position-relative">
<div class="wvu-bg-img">
<img class="object-fit-cover xobject-position- h-100 w-100 position-relative wvu-bg-blend-mode-luminosity" style="opacity: 0.08" src="https://ccdam.wvu.edu/design-system-3/32089+S+0020+JFS+XXX.jpg" alt="" />
</div>
<div class="wvu-z-index-content py-6"><!--put content here.--></div>
</div>