Responsive background images/videos for desktop, tablet mobile breakpoints

[StrangeTech]

It will be good to be able to show a different background image on different responsive breakpoints as some designers prefer to use dedicated images for desktop and mobile.

Now that Cwicly supports responsive background colours/gradients this is a logical progression.

It is related to:

Video background show image background on mobile

Would allow users to have a video background on desktop that on mobile, gets replaced by an image background (to avoid consuming the user’s monthly traffic or device battery simply for a visual background effect).

Here is a workaround as demonstrated by @Marius using relative styles:

Swap background video with image on mobile devices (and vice versa)

So @danstanley asked yesterday how to display a video background on desktop and instead on mobile devices, only a background image. I offered him to quickly setup a demo, in case he needs any help. So here we go. I only used a section block with a video background and the image which is required on mobile devices is just the video placeholder image. So everything is already in place out of the box. With relative styling it is easy to target the video container, as well as the image container. …

Thank you.

[StrangeTech]

@weedor already created a feature request for this - since this one has more votes and is marked as planned, we can probably keep this one active.

[StrangeTech]

Just a quick follow up on this - we have a new website starting now, with a very quick turnaround required. It is extremely image and animation heavy.

Different images on mobile are essential for many of the pages, particularly the home page as it features some unique layouts and elements that will change shape and size between breakpoints.

@Louis, this feature will be greatly appreciated as it will save us a huge amount of unnecessary effort when it is included and if you can include it in an upcoming version, it will be a tremendous help for us.

[hopscotch]

I second that. I am running into the same issue myself.

[caeto]

we need this option for Responsive background images/videos for desktop, tablet mobile breakpoints

[StrangeTech]

@Louis, as mentioned in the related feature request for relative styles, just highlighting this again as it will be a huge win.

[msguerra74]

Adding “picture” element support would solve this. Bricks recently did this and it works well. In addition to being able to change images at each breakpoint, you can also swap images for light/dark modes versions (since they are all controlled by media queries).

Right now you can do it manually by using the picture element via the Cwicly code block, but having it built into the image block would be even better.

[StrangeTech]

@msguerra74

Right now you can do it manually by using the picture element via the Cwicly code block, but having it built into the image block would be even better.

If you want to wrap an Image with a <picture> tag, you can also simply wrap your Image block with a Div block and change the Div block’s html tag to picture.

[msguerra74]

Yep, but you still need to add the <source> tags via the code block as far as I can see. So the current workflow seems to be this: add a div, change the tag to picture, then add however many source tags you need via the code block, and end with the fallback image block.

/* Responsive Images */
<picture>
  <source srcset="large.png" media="(max-width: 64em)">
  <source srcset="medium.png" media="(max-width: 48em)">
  <img src="small.png" alt="A description of the image.">
</picture>

/* Dark Mode Image */
<picture>
  <source srcset="dark.png" media="(prefers-color-scheme: dark)">
  <img src="light.png" alt="A description of the image.">
</picture>