Background

• Cover
• Contain
• No repeat modifier
• Position middle center modifier
• Assets modifiers

Component c-bg manages background properties of any HTML element. c-bg single does not apply any CSS property, only its modifiers do.

Cover

Modifier m-cover applies background-size: cover.

<div></div>
<div class="c-bg m-cover"></div>

Image applied:<br>
<img src="../img/goa-free-2.webp">

<!-- DEMO ONLY -->
<style>
    body { padding: 2em }
    div {
        display: inline-block;
        width: 20vw;
        aspect-ratio: 1;
        background-image: url('../img/goa-free-2.webp');
        border: var(--goafe-border-thin-primary-500);
    }
    img {
        width: 100%; height: auto;
    }
</style>

Contain

Modifier m-contain applies background-size: contain.

<div></div>
<div class="c-bg m-contain"></div>

Image applied:<br>
<img src="../img/goa-free-2.webp">

<!-- DEMO ONLY -->
<style>
    body { padding: 2em }
    div {
        display: inline-block;
        width: 20vw;
        aspect-ratio: 1;
        background-image: url('../img/goa-free-2.webp');
        border: var(--goafe-border-thin-primary-500);
    }
    img {
        width: 100%; height: auto;
    }
</style>

No repeat modifier

Modifier m-no-repeat applies background-repeat: no-repeat.

<div></div>
<div class="c-bg m-no-repeat"></div>
<br>
Image applied:<br>
<img src="../img/goa-map-marker.svg">

<!-- DEMO ONLY -->
<style>
    body { padding: 2em }
    div {
        display: inline-block;
        width: 40vw;
        aspect-ratio: 1;
        background-image: url('../img/goa-map-marker.svg');
        border: var(--goafe-border-thin-primary-500);
    }
</style>

Position middle center modifier

Modifier m-position-middle-center applies background-position: center.

<div></div>
<div class="c-bg m-position-middle-center"></div>
<br>
Image applied:<br>
<img src="../img/goa-map-marker.svg">


<!-- DEMO ONLY -->
<style>
    body { padding: 2em }
    div {
        display: inline-block;
        width: 40vw;
        aspect-ratio: 2;
        background-image: url('../img/goa-map-marker.svg');
        background-repeat: no-repeat;
        border: var(--goafe-border-thin-primary-500);
    }
</style>

Assets modifiers

Get various medias as background with the following modifiers prefixed with m-asset-{asset_name} :

<div class="c-bg m-asset-vertical-primary-1"></div>
<div class="c-bg m-asset-goa-free-1 m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-logo-goa-free-white m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-store-mockup m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-business m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-business-alt m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-business-content-1 m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-business-content-2 m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-business-content-3 m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-marcel m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-goa-register m-contain m-no-repeat m-position-middle-center"></div>
<div class="c-bg m-asset-icon-search-left"></div>
<div class="c-bg m-asset-icon-search-right"></div>

<!-- DEMO ONLY -->
<style>
    body { padding: 2em; background-color: #EEE; }
    div {
        display: inline-block;
        width: 40vw;
        aspect-ratio: 1;
        border: 1px dotted black;
    }
</style>