Responsive background images/videos for desktop, tablet mobile breakpoints

Feature Requests
1

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:

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

Thank you.

1 Like
2

@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.

1 Like
3

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.

2 Likes
4

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

2 Likes
5

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

1 Like
6

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

7

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.

8

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.

9

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>
10

Given the possibility of multiple background images is on the horizon now that the new UI has landed in 1.4.2, and given the other brilliant changes that are happening in Cwicly, I am just giving this request a bit of attention.

This will give significantly more power and allow Cwicly to do many things that currently can only be done with custom css or workarounds.

It will also make Cwicly much more editable for less experienced editors.

A while back we had a request to create a microsite that was originally done in WebFlow and because the target audience were children and it was highly visual, there were in some cases 10 background images on some elements and these were all responsive.

Creating something like this is still achievable in Cwicly today with workarounds due to its flexibility, but editing and maintaining a site with this many images will be so much easier when this feature has been implemented.

11

Thanks for bringing it up.
The rework of the background property makes it fundamental to have responsive properties :+1:

1 Like