How to Change the Background Image in Elementor?

Changing the background image in Elementor is a straightforward process typically done within the style settings of a section, column, or widget.

To change the background image on a specific element within your Elementor page or template, you need to access its style settings.

Steps to Change Background Image

Here are the general steps to add or modify a background image in Elementor:

1. Select the Element: Click on the element you wish to add a background image to. This is most commonly a Section, Column, or sometimes a Widget.
2. Navigate to Style Tab: In the Elementor editor sidebar, click on the Style tab. This tab contains all the visual styling options for the selected element.
3. Find Background Options: Within the Style tab, locate the Background settings block.
4. Choose Background Type: Under the Background settings, you'll see different background types like Classic, Gradient, Video, or Slideshow. Select Classic.
5. Select Your Image: Once Classic is selected, you will see options for Color and Image. Click on the Image icon.
   • This will open the WordPress Media Library.
   • You can choose an existing image or upload a new one.
   • Select the desired image and click the "Insert Media" button.

Once the image is selected, you can further customize its appearance using the settings available under the Background section.

Customizing Background Image Settings

After adding the image, Elementor provides several options to control how it is displayed. Based on the provided reference, two key settings mentioned are Position and Background Overlay.

• Position: This setting controls where the image is placed within its container. Common options include Top Left, Center Center, Bottom Right, etc. As shown in the reference, you might want to position the image to the center for optimal display.
• Attachment: Controls whether the background scrolls with the content (Scroll) or stays fixed (Fixed).
• Repeat: Determines if the image repeats to fill the area (No-repeat, Repeat-x, Repeat-y). Usually set to No-repeat for large background images.
• Size: Controls how the image scales within its container.
  • Auto: Default size.
  • Cover: Resizes the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. (Most common for full section backgrounds).
  • Contain: Resizes the background image to make sure the image is fully visible within the container, maintaining its aspect ratio.
  • Custom: Allows you to set a specific width and height.

Adding a Background Overlay

The reference specifically highlights the need to "add a background overlay" when there's "a conflict between the background. And the text it's not visible. Enough". This is a crucial step for readability.

A Background Overlay adds a layer of color or gradient (and optionally another image) on top of your main background image. You can then adjust the opacity of this overlay.

To add a Background Overlay:

1. Below the main Background settings, find the Background Overlay settings block.
2. Choose a background type (Classic for color/image, Gradient for gradient).
3. Select a color or image for the overlay.
4. Adjust the Opacity slider. Increasing the opacity makes the overlay more solid, darkening or coloring the background image, which helps make overlying text more visible and readable.
5. (Optional) You can also add a CSS filter or a Blend Mode for more advanced effects.

By positioning the image (like centering it) and adding a background overlay to improve text contrast, you can ensure your background image enhances, rather than hinders, the content on your Elementor page.