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 |
|
|
| The image URL. If provided, the |
|
|
| 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 |
|
|
| Defines an alternative text description of the image. Recommended. |
|
|
| Controls when the image is loaded: |
|
|
| Sets the width of the image. Recommended to avoid layout shifting. |
|
|
| Sets the height of the image. Recommended to avoid layout shifting. |