Background patterns are single classes that can be added to other components to create a patterned background effect.
cssproperty | value | screensize |
---|---|---|
background-image | pattern-plus | n/a |
One common use case for these is on heroes.
Hero with plus pattern background
HTML
<section class="hero background-color-primary color-primary-invert background-image-pattern-plus">
<div class="hero-content">
<h2 class="font-size-h2">Hero with plus pattern background</h2>
</div>
</section>
Note that with a Content Security Policy enabled, you will need to specify img-src data:
in order for these Atomics to be effectual.