Community forum for knowledge and support

Updated last year

Adjusting Background Images with Padding Classes

At a glance

The community member is asking how to allow editors to change the background image on components with a padding class that "covers" the image, using the example of section_header54. In the comments, another community member suggests a potential fix, which involves adding the z-index-1 class to the max-width-large and header54_background-image classes to bring them to the "front", and changing the pointer-events property to None or adding the pointer-events-none class to the image-overlay-layer div. However, the community member notes that they are not sure if this is the best practice since the components don't come out-of-the-box like this.

How do most folks allow Editors to change the background image on components with padding class that “covers” the image? For example, section_header54:

N
1 comment

For anyone else looking, I’m not sure if this is best practice since the components don’t come out-of-the-box like this, but my fix was:

  1. On the max-width-large and header54_background-image classes, add the z-index-1 class to bring them to the “front”.
  2. On the image-overlay-layer div, change the pointer events property to None. Alternatively add the point-events-none class.

Add a reply
Sign up and join the conversation on Slack