fs-image

Web component for embedding background rendered images in html content.

Installation

npm i @fireflysemantics/fs-image

Usage

Include fs-image via CDN like this in your html page:

<script src="https://unpkg.com/@fireflysemantics/fs-image"></script>

Stackblitz Demo

Development

Design

The image is rendered with this CSS:

  static styles = css`
    :host {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;    
    }
  `;

Baseline

The project baseline is based on the Lit Element Typescript Starter Project.

Package

This project uses the build configuration from the rollup starter app as well as the rollup.config.js example configuration found in the Lit Element Typescript Starter Project.