Background

Ready Added in 2.0.0

A collection of utility classes to add different backgrounds to elements.

Usage

To apply a background color to an element, add one of the following classes. The actual color for each modifier is defined by the Gloss style that you have chosen or customized.

Class Description
.gls-background-default Applies the default background color.
.gls-background-muted Applies a muted background color.
.gls-background-gradient Applies a gradient background color.
.gls-background-primary Applies the primary background color.
.gls-background-primary-light Applies a lighter primary background color.
.gls-background-secondary Applies a secondary background color.
.gls-background-secondary-light Applies a lighter secondary background color.
.gls-background-tertiary Applies a tertiary background color. 
<div class="gls-background-primary"></div>

Note To adapt your content for better visibility on each background, add the .gls-light or .gls-dark class from the Inverse component. Use the Padding component to add some padding to the elements.

  • Default

    Muted

    Primary

    Primary Light

    Secondary

    Secondary Light

    Tertiary

    Gradient

  • <div class="gls-child-width-1-2@s gls-text-center" gls-grid>
    <div>
        <div class="gls-background-default gls-padding gls-panel">
            <p class="gls-h4">Default</p>
        </div>
    </div>
    <div>
        <div class="gls-background-muted gls-padding gls-panel">
            <p class="gls-h4">Muted</p>
        </div>
    </div>
    <div>
        <div class="gls-background-primary gls-light gls-padding gls-panel">
            <p class="gls-h4">Primary</p>
        </div>
    </div>
    <div>
        <div class="gls-background-primary-light gls-padding gls-panel">
            <p class="gls-h4">Primary Light</p>
        </div>
    </div>
    <div>
        <div class="gls-background-secondary gls-light gls-padding gls-panel">
            <p class="gls-h4">Secondary</p>
        </div>
    </div>
    <div>
        <div class="gls-background-secondary-light gls-padding gls-panel">
            <p class="gls-h4">Secondary Light</p>
        </div>
    </div>
    <div>
        <div class="gls-background-tertiary gls-light gls-padding gls-panel">
            <p class="gls-h4">Tertiary</p>
        </div>
    </div>
    <div>
        <div class="gls-background-gradient gls-padding gls-panel">
            <p class="gls-h4">Gradient</p>
        </div>
    </div>
</div>

Size modifiers

This component features classes to specify the size of background images by keeping its intrinsic ratio.

Class Description
.gls-background-cover Scales the background image to completely cover the containing area.
.gls-background-contain Scales the background image as far as its width and height can fit inside the containing area.
.gls-background-width-1-1 Scales the background image to fill 100% of the available width.
.gls-background-height-1-1 Scales the background image to fill 100% of the available height.

Note When using these classes, the background position automatically shifts to the middle and background-repeat is set to no-repeat.

<div class="gls-background-cover"></div>

  • Cover

    Contain

  • <div class="gls-child-width-1-2@s gls-light" gls-grid>
    <div>
        <div class="gls-background-cover gls-height-medium gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);">
            <p class="gls-h4">Cover</p>
        </div>
    </div>
    <div>
        <div class="gls-background-contain gls-background-muted gls-height-medium gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);">
            <p class="gls-h4">Contain</p>
        </div>
    </div>
</div>

Position modifiers

To alter the background position of your image — which is in the top left-hand corner of the area by default, add one of the following classes.

Class Description
.gls-background-top-left The initial position of the image is in the top left hand corner.
.gls-background-top-center The initial position of the image is at the top.
.gls-background-top-right The initial position of the image is in the top right hand corner.
.gls-background-center-left The initial position of the image is on the left.
.gls-background-center-center The initial position of the image is in the middle.
.gls-background-center-right The initial position of the image is on the right.
.gls-background-bottom-left The initial position of the image is in the bottom left hand corner.
.gls-background-bottom-center The initial position of the image is at the bottom.
.gls-background-bottom-right The initial position of the image is in the bottom right hand corner. 
<div class="gls-background-top-left"></div>

  • Top Right

    Top Left

  • <div class="gls-child-width-1-2@s gls-light" gls-grid>
    <div>
        <div class="gls-background-top-right gls-background-cover gls-height-medium gls-panel gls-flex gls-flex-middle gls-flex-center" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);">
            <p class="gls-h4">Top Right</p>
        </div>
    </div>
    <div>
        <div class="gls-background-top-left gls-background-cover gls-height-medium gls-panel gls-flex gls-flex-middle gls-flex-center" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);">
            <p class="gls-h4">Top Left</p>
        </div>
    </div>
</div>

No repeat

To keep smaller images from repeating to fill the background area, add the .gls-background-norepeat class.

<div class="gls-background-norepeat"></div>

Attachment

You can also apply a fixed background attachment, so that the image remains in its position while scrolling the site.

<div class="gls-background-fixed"></div>

  • <div class="gls-background-fixed gls-background-center-center gls-height-medium gls-width-large" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);"></div>

Responsive

Add one of the following classes to limit the display of background images to certain viewport sizes. This is great in cases where the image and content overlap on a phone screen in a way that would make text illegible.

Class Description
.gls-background-image@s Displays the background image on device widths of 640px and larger.
.gls-background-image@m Displays the background image on device widths of 960px and larger.
.gls-background-image@l Displays the background image on device widths of 1200px and larger.
.gls-background-image@xl Displays the background image on device widths of 1600px and larger. 
<div class="gls-background-image@m"></div>

Resize your browser window to see the effect in the example below.

  • Image shown

    Image not shown

  • <div class="gls-background-image@m gls-background-cover gls-background-muted gls-height-medium gls-width-large gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/dark.jpg);">
    <p class="gls-h4 gls-margin-remove gls-visible@m gls-light">Image shown</p>
    <p class="gls-h4 gls-margin-remove gls-hidden@m">Image not shown</p>
</div>

Blend modes

Add one of the following classes to apply different blend modes to your background image. You can combine these with the background color classes, as well. For a better understanding of how background blend modes work, take a look at this CSS Tricks article.

Class Description
.gls-background-blend-multiply This class sets the blend mode to multiply.
.gls-background-blend-screen This class sets the blend mode to screen.
.gls-background-blend-overlay This class sets the blend mode to overlay.
.gls-background-blend-darken This class sets the blend mode to darken.
.gls-background-blend-lighten This class sets the blend mode to lighten.
.gls-background-blend-color-dodge This class sets the blend mode to color dodge.
.gls-background-blend-color-burn This class sets the blend mode to color burn.
.gls-background-blend-hard-light This class sets the blend mode to hard light.
.gls-background-blend-soft-light This class sets the blend mode to soft light.
.gls-background-blend-difference This class sets the blend mode to difference.
.gls-background-blend-exclusion This class sets the blend mode to exclusion.
.gls-background-blend-hue This class sets the blend mode to hue.
.gls-background-blend-saturation This class sets the blend mode to saturation.
.gls-background-blend-color This class sets the blend mode to color.
.gls-background-blend-luminosity This class sets the blend mode to luminosity. 
<div class="gls-background-blend-multiply gls-background-primary"></div>

  • Multiply

    Screen

    Overlay

    Darken

    Lighten

    Color Dodge

    Color Burn

    Hard Light

    Soft Light

    Difference

    Exclusion

    Hue

    Saturation

    Color

    Luminosity

  • <div class="gls-child-width-1-2 gls-child-width-1-3@s gls-grid-small gls-light" gls-grid>
    <div>
        <div class="gls-background-blend-multiply gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Multiply</p>
       </div>
    </div>
    <div>
        <div class="gls-background-blend-screen gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Screen</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-overlay gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Overlay</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-darken gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Darken</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-lighten gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Lighten</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-color-dodge gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Color Dodge</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-color-burn gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Color Burn</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-hard-light gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Hard Light</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-soft-light gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Soft Light</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-difference gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Difference</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-exclusion gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Exclusion</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-hue gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Hue</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-saturation gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Saturation</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-color gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Color</p>
        </div>
    </div>
    <div>
        <div class="gls-background-blend-luminosity gls-background-primary gls-background-cover gls-height-small gls-panel gls-flex gls-flex-center gls-flex-middle" style="background-image: url(https://utahhealthcare.github.io/gloss-docs/images/photo.jpg);">
            <p class="gls-h4">Luminosity</p>
        </div>
    </div>
</div>