Background Effects

Use a vignetting effect wvu-bg-vignetting--{value} to improve legibility of text. Just supply a numerical value between 10 - 100 (in increments of 10) e.g. wvu-bg-vignetting--80. Combine with the modifier wvu-bg-vignetting--right when your subject is on the left side of the photo. This will shift the vignetting to the right.

Use background color effects to create interesting WVU-branded elements. For example, use wvu-bg-blend-mode-luminosity--{value} with a background color to add a luminosity effect to a photo. This is similar to the multiply effect in Photoshop.

You would generally apply these classes to the outer-most container of an element.

These effects also works well in combination with the grid, grid-zoomed, and slashes elements. See our section on combining background utilities.

<div class="w-100 mb-3 wvu-bg-blend-mode-luminosity--80 bg-wvu-accent--blue-light my-5 p-5 text-center text-wvu-blue" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">
    ...
  </div>
</div>
<div class="w-100 mb-3 wvu-bg-blend-mode-lighten" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  ...
</div>
<div class="w-100 mb-3 wvu-bg-vignetting--80" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">
    ...
  </div>
</div>

Combine with wvu-z-index Utility

Make sure to use wvu-z-index-content to define the z-index of your content when using the luminosity and vignetting utilities. This will ensure that the content stays above the background images used to achieve these effects. See the difference below.

When using the luminosity utility, you can define different contrast levels on a scale of 0 - 100 (in increments of 10). A lower number will have more contrast. Use a value appropriate for the desired effect, and always keep legibility of any text that overlays the image in mind. Below are some examples:

<div class="w-50 wvu-bg-blend-mode-luminosity--10 bg-wvu-accent--blue-light py-5 text-center text-white" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">
    wvu-bg-blend-mode-luminosity--10 bg-wvu-accent--blue-light
  </div>
</div>
<div class="w-50 wvu-bg-blend-mode-luminosity--80 bg-wvu-accent--blue-light py-5 text-center text-wvu-blue" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
  <div class="wvu-z-index-content">
    wvu-bg-blend-mode-luminosity-80 bg-wvu-accent--blue-light
  </div>
</div>

Likewise, you can set the opacity on the vignetting utility on a scale of 10 - 100.

The lighten effect uses the primary blue from WVU’s color palette as the applied background color. The difference is subtle, but you can see a comparison below:

<div class="wvu-bg-size-cover w-50 py-5 text-center text-white" style="background-image: url(https://cleanslate.wvu.edu/files/dcd007eb-a764-4437-8657-9ed2fee1f6ab/1780x1780?cb=1538673399)">
    <span class="wvu-z-index-content">No background effect</span>
</div>
<div class="wvu-bg-blend-mode-lighten w-50 py-5 text-center text-white" 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-lighten</span>
</div>

Use Vignetting to Separate Content

The vignetting effect is also useful for separating components that have the same background color. Just apply a subtle version, for example wvu-bg-vignetting--20. You can likewise add it as a subtle transparent background within a component.

<div class="py-5 text-center text-white bg-wvu-neutral--black w-100">
    <span class="wvu-z-index-content">No vignetting</span>
</div>
<div class="py-5 text-center text-white bg-wvu-neutral--black wvu-bg-vignetting--20 w-100">
    <span class="wvu-z-index-content">Vignetting</span>
</div>