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:

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

📘 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

name	type	default value	description
`src`	`string`		The image URL. If provided, the `srcs` will be automatically set.
`srcs`	`object`		Accepts 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).
`alt`	`string`		Defines an alternative text description of the image. Recommended.
`loading`	`eager` \| `lazy` \| `preload`	`eager`	Controls 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.
`width`	`string` (example: `2560`)		Sets the width of the image. Recommended to avoid layout shifting.
`height`	`string` (example: `1440`)		Sets the height of the image. Recommended to avoid layout shifting.

useIntersection

ResponsiveImage

Video

getResponsiveImageSrc

Best Practices