Background dynamic images
Unanswered
Capelin posted this in #help-forum
CapelinOP
I am trying to setup dynamic background images which are fetched from CMS. There are 2 images (mobile and desktop).
Which would be the best way to set it up so that it would load only the size needed depending on the screen width?
The current way images are hardcoded with bg url and I have 4 different image sizes depending on the screen width.
I was looking into getImageProps but I can not find an example for background dynamic images.
Thank you!
Which would be the best way to set it up so that it would load only the size needed depending on the screen width?
The current way images are hardcoded with bg url and I have 4 different image sizes depending on the screen width.
I was looking into getImageProps but I can not find an example for background dynamic images.
Thank you!
2 Replies
CapelinOP
so far the best i have come up with is this using tailwind css.
<Image
src={bgMobile}
alt="background"
width={0}
height={0}
quality={90}
sizes={"100%"}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
className="absolute lg:hidden"
/>
<Image
src={bg}
alt="background"
width={0}
height={0}
quality={90}
sizes={"100%"}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
className="absolute hidden lg:block"
/>
Is there a better way ?
<Image
src={bgMobile}
alt="background"
width={0}
height={0}
quality={90}
sizes={"100%"}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
className="absolute lg:hidden"
/>
<Image
src={bg}
alt="background"
width={0}
height={0}
quality={90}
sizes={"100%"}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
className="absolute hidden lg:block"
/>
Is there a better way ?
CapelinOP
somebody? 🙂