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