D.School Component Library

Background: With Blend Mode 

<style>
    .o-background-image--01 {
        background-image: url("https://picsum.photos/480/630");
    }

    @media(min-width: 480px) {
        .o-background-image--01 {
            background-image: url("https://picsum.photos/768/432");
        }
    }

    @media(min-width: 768px) {
        .o-background-image--01 {
            background-image: url("https://picsum.photos/1024/576");
        }
    }

    @media(min-width: 1024px) {
        .o-background-image--01 {
            background-image: url("https://picsum.photos/1260/709");
        }
    }

    @media(min-width: 1260px) {
        .o-background-image--01 {
            background-image: url("https://picsum.photos/1440/810");
        }
    }
</style>
<div class="o-background-image o-background-image--01 o-background-image--multiply"></div>
 
{% set base_class = background.base_class|default('o-background-image') %}

{% if background.image.src %}
  {% if background.opacity %}
    {% set background_styles = ' style="opacity: calc('~ background.opacity ~'/100);"' %}
  {% endif %}
  {% set background_class = " o-background-image--" ~ background.image.id %}
  <style>
    .o-background-image--{{ background.image.id }} {
      background-image: url("{{ background.image.src }}");
    }
    {% for item in background.image.sources %}
      @media{{ item.media }} {
        .o-background-image--{{ background.image.id }} {
          background-image: url("{{ item.srcset }}");
        }
      }
    {% endfor %}
  </style>
  <div class="{{ bem(base_class, background.element, background.modifiers, background.extra) }}{{ background_class }}{{ background.blend_mode ? ' o-background-image--' ~ background.blend_mode }}"{{ background_styles }}></div>
{% endif %}
 
{
  "background": {
    "image": {
      "id": "01",
      "src": "https://picsum.photos/480/630",
      "sources": [
        {
          "media": "(min-width: 480px)",
          "srcset": "https://picsum.photos/768/432"
        },
        {
          "media": "(min-width: 768px)",
          "srcset": "https://picsum.photos/1024/576"
        },
        {
          "media": "(min-width: 1024px)",
          "srcset": "https://picsum.photos/1260/709"
        },
        {
          "media": "(min-width: 1260px)",
          "srcset": "https://picsum.photos/1440/810"
        }
      ]
    },
    "blend_mode": "multiply"
  }
}

No notes defined.