Offcanvas - Background image - Suggestions?

Wappler General
1

I’ve been attempting to add a background image to an offcanvas component.
Here’s the css:

background_code
background_code3632×1585 800 KB

Here’s the result:

background_example
background_example2465×1787 408 KB

Is there a way to have the image to dynamically fill the offcanvas container and show the whole image across viewports?

As always - thanks…

2

There are two ways to do this:

  1. Apply the background image to the off-canvas (as you have shown) and increase the width of the off-canvas to 100%. Content width can still be restricted using the usual methods.
  2. Apply the background image to the off-canvas backdrop (.offcanvas-backdrop) and change the background colour of the off-canvas to transparent.
3

Thanks Ben Option 1 worked