Skip to main content

Combining Background Utilities

You can combine certain background effects to achieve interesting results. For example, you can combine the wvu-bg-vignetting--{value} utility with the wvu-bg-lighten utility.

You can also combine the wvu-bg-luminosity--{value} utility with the wvu-bg-vignetting--{value} utility if they have the same {value} . Otherwise the value given in the wvu-bg-luminosity--{value} class will take precedence.

You can also combine a background pattern with either wvu-bg-luminosity--{value}, wvu-bg-lighten, or wvu-bg-vignetting--{value} (if using the luminosity utility be sure to also include a background color). Below are some examples:

Examples

wvu-bg-blend-mode-luminosity--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center
<div class="wvu-bg-blend-mode-luminosity--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center" 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-blend-mode-luminosity--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center</span>
</div>
wvu-bg-blend-mode-lighten wvu-bg-vignetting--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center
<p class="wvu-bg-blend-mode-lighten wvu-bg-vignetting--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center" 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-blend-mode-lighten wvu-bg-vignetting--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center</span>
</p>
wvu-bg-blend-mode-luminosity--80 wvu-bg-vignetting--80 bg-wvu-neutral--black wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center
<div class="wvu-bg-blend-mode-luminosity--80 wvu-bg-vignetting--80 bg-wvu-neutral--black wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center" 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-blend-mode-luminosity--80 wvu-bg-vignetting--80 bg-wvu-neutral--black wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center</span>
</div>
wvu-bg-pattern-blue wvu-bg-vignetting--40 bg-wvu-neutral--black w-100 py-5 text-white text-center
<div class="wvu-bg-pattern-blue wvu-bg-vignetting--40 bg-wvu-neutral--black w-100 py-5 text-white text-center" 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-pattern-blue wvu-bg-vignetting--40 bg-wvu-neutral--black w-100 py-5 text-white text-center</span>
 </div>
bg-wvu-accent--burnt-orange wvu-bg-topo-light w-100 py-5 text-white text-center
<div class="wvu-bg-blend-mode-luminosity--80 bg-wvu-accent--burnt-orange wvu-bg-pattern-grid-transparent w-100 py-5 text-white text-center">
  <span class="wvu-z-index-content">bg-wvu-accent--burnt-orange wvu-bg-topo-light w-100 py-5 text-white text-center</span>
</div>