ResponsiveBackgroundImage

Suggest Edits

Overview

The ResponsiveBackgroundImage component is designed to help you use background images efficiently. It takes care of image-set CSS function for you.

📘

The ResponsiveBackgroundImage component renders a div behind the scenes, with the image attached to it via CSS. With that in mind, you might want to use ResponsiveImage instead.

Import

The ResponsiveBackgroundImage component can be imported directly from the frontend-ui package, which is pre-installed in your Shogun Frontend store.

import ResponsiveBackgroundImage from 'frontend-ui/ResponsiveBackgroundImage'

Usage

import React from 'react'
import getResponsiveImageSrc from 'frontend-ui/getResponsiveImageSrc'
import ResponsiveBackgroundImage from 'frontend-ui/ResponsiveBackgroundImage'

const MyComponent = ({ src }) => {
  // Assuming `src` is: https://f.shgcdn.com/cbc7d039-b532-42d4-979a-2c8180befadd/ 
  return (
    <ResponsiveBackgroundImage
      src={src}
      // Or, you can set your own srcs object
      srcs={{
        '(max-width: 768px)': getResponsiveImageSrc(src, { width: '800' }),
        '(min-width: 768px) and (max-width: 1024px)': getResponsiveImageSrc(src, {
          width: '1000',
        }),
        default: getResponsiveImageSrc(src, { width: '1200' }),
      }}
      alt="A black t-shirt with a black Shogun logo on it. The t-shirt is on a red surface."
      style={{ width: '600px', height: '300px', backgroundSize: '100%' }}
      loading="lazy"
    />
  )
}

export default MyComponent

Here we tell the component to render three different images for three different screen resolutions, which is going to be rendered as:

/* default */
.my-img {
  background-image: url("...");
}

@media (max-width: 768px) {
  .my-img {
    background-image: url("...");
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .my-img {
    background-image: url("...");
  }
}

📘

Note

If width and height are specified, the background image will turn responsive. We highly encourage providing them if that's your use case.

Props

nametypedefault valuedescription
srcstringThe image URL. If provided, the srcs will be automatically set.
srcsobjectAccepts an object containing key-value pairs of valid media query and image urls. Any value supported by CSS @media expression is supported. You can use default as a key for top level background-image style (see an example above).
altstringDefines an alternative text description of the image. Recommended.
loadingeager | lazy | preloadeagerControls when the image is loaded:
eager on page loads, lazy when image is near the viewport.

Use loading="preload" with caution. This optimization should only be used for the main hero background image that is the Largest Contentful Paint (LCP) on a page. You should measure the impact of this strategy as it can cause a negative impact.
widthstring (example: 2560)Sets the width of the image. Recommended to avoid layout shifting.
heightstring (example: 1440)Sets the height of the image. Recommended to avoid layout shifting.

Updated 10 months ago