Elementor Background Gradient Setup

1. **Edit the Element**:
– Open Elementor and select the element (section, column, or widget) to which you want to apply the background.

2. **Go to the Style Tab**:
– In the Elementor editor, navigate to the **Style** tab.

3. **Custom CSS** (Pro Feature):
– If you have Elementor Pro, you can directly add custom CSS to the element. Use the following CSS code:

selector {
         background: linear-gradient(202deg, rgba(68, 114, 196, 0.00) 56.62%, rgba(68, 114, 196, 0.15) 86.8%), 
                     linear-gradient(0deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.20) 100%), 
                     url('<path-to-image>') lightgray -364.769px -36.581px / 133.919% 159.285% no-repeat, 
                     url('<path-to-image>') lightgray -364.769px -36.581px / 133.919% 159.285% no-repeat;
     }

– Replace “ with the actual URL of the image.

4. **Using Background Settings** (No Pro Required):
– Go to the **Style** tab > **Background** section.
– Select **Classic** for the background type and upload your image.
– Add a linear gradient:
– Under the **Gradient** section, select the colors and adjust the angle (202° in this case).
– Adjust background position, attachment, repeat, and size:
– Position: Use `Custom` and set `-364.769px` for X and `-36.581px` for Y.
– Size: Choose **Custom** and set 133.919% for width and 159.285% for height.
– Add the second layer manually by repeating the steps for the additional background.

5. **Preview and Adjust**:
– Preview your design to ensure the background appears as expected.
– Make any necessary adjustments to fit your layout.

If you need further assistance with the CSS or Elementor configuration, let me know!