How to Add Background Image in Elementor [Easy Steps]

Updated on March 20, 2025 by Editorial Team

Want to make your website more visually appealing and engaging? Learn How to Add Background Image in Elementor.

Background images are a great way to enhance your website’s aesthetic appeal, create a more immersive experience for your visitors, and reinforce your brand identity.

They can set the tone for your WordPress site, guide the user’s eye, and even improve readability.

However, adding background images traditionally involves playing around with CSS code and media queries. This can be frustrating if you aren’t an expert coder.

The Elementor editor simplifies this process and offers a user-friendly way to add background images to your WordPress website.

Let’s explore easy methods for adding images to your site’s background using the Elementor editor and specialized image widgets from The Plus Addons for Elementor.

Table Of Content

Why Should You Add a Background Image in Elementor?

Background images can improve your website’s design and user experience. Here’s why you should consider adding them:

Background image how to add background image in elementor [easy steps] from the plus addons for elementor
  1. Visual Appeal: A well-chosen image can instantly capture attention and create a positive first impression. It sets the visual tone and atmosphere of your website.
  2. Branding: Use background images to reinforce your brand identity. Select images that reflect your brand colors, style, and values.
  3. Improved Readability: A subtle image in the background can provide visual contrast, making text content easier to read and digest.

Adding a Background Image in Elementor [Multiple Scenarios]

Elementor offers incredible flexibility when it comes to adding images to the background. You can apply them to your entire website, a specific page, or even individual sections and columns.

You can also add dynamic effects like hover transitions, scrolling effects, and parallax backgrounds to create a more interactive and engaging experience.

Let’s see how you can achieve these design effects.

How to Add Background Image in Elementor for the Whole Website?

Go to your WordPress dashboard, and navigate to Pages > All Pages.

Select any page and click Edit with Elementor. Once the Elementor editor loads, click the three horizontal lines icons in the top left corner to open the Site Settings panel.

In the site settings panel, select Site Settings > Background.

Settings background how to add background image in elementor [easy steps] from the plus addons for elementor

Choose the Classic background type. Click the Upload Image button to select the image you want to use for your website’s background.

Upload image how to add background image in elementor [easy steps] from the plus addons for elementor

Now you can adjust your background settings with the following configurations:

  1. Attachment: This controls how the background image behaves when you scroll. Scroll means the image moves with the page content, while Fixed keeps it in a stationary position.
  2. Repeat: This dictates how the image tiles across the screen. Options include repeating horizontally (Repeat-X), vertically (Repeat-Y), in both directions (Repeat), or not at all (No-Repeat).
  3. Display Size: This determines how the image is scaled. The cover ensures the image covers the entire background, potentially cropping some parts. Contain fits the whole image within the background, potentially leaving empty space. Auto displays the image at its original size.

Once you’re happy with your settings, click the Save Changes button.

Are your images showing up blurry? Learn how to fix blurry images in Elementor.

How to Add Background Image in Elementor for an Individual Page?

Next, let’s find out how to set background image in Elementor on an individual page.

Open the page you want to edit with Elementor. In the Elementor editor, click the gear icon (Settings) at the top center to open the Page Settings.

In the Page Settings panel, go to Style > Background Type and select Classic.

Click the “+” button to upload the image you want to use as your page background.

Individual page how to add background image in elementor [easy steps] from the plus addons for elementor

Adjust the background settings (Attachment, Repeat, Size, Overscroll Behavior) as needed.

These settings work the same way as for the site settings.

How to Add Background Image in an Elementor Section or Column?

In the Elementor editor, hover over the section or column you want to modify and click the handle to open the Section Settings.

Section or column how to add background image in elementor [easy steps] from the plus addons for elementor

In the Section Settings, go to the Style tab. You’ll see two options under Background: Normal and Hover.

  1. Normal: This sets a stationary background image for the section/column.
  2. Hover: This allows you to set a different background image that appears when a user hovers their mouse over the section/column.

Select either Normal or Hover, then choose Classic as the Background Type.

Click the “+” button to upload your desired background image.

Upload your desired background image how to add background image in elementor [easy steps] from the plus addons for elementor

To configure the background:

If you select Normal, you can configure the Scrolling Effect. This creates a parallax effect where the background image moves at a different speed than the content when scrolling.

You can also add a Mouse Effect which creates subtle movement in the background image as the user moves their mouse over the section.

Mouse effect how to add background image in elementor [easy steps] from the plus addons for elementor

If you select Hover, you can also set the Transition Duration. This determines how long it takes for the hover background image to transition in and out when the user hovers their mouse over the section.

Elementor’s default settings automatically cover the entire content section with the image. However, you can adjust this using the size settings.

Want to improve user experience on your website? Learn how to add a parallax effect in Elementor.

How to Change a Background Image on Scroll in Elementor?

Elementor provides a solid foundation for website design, but sometimes you need extra features to achieve a specific look.

If you want to change your background image as the user scrolls, you can use the Horizontal Scroll widget from The Plus Addons for Elementor to achieve this design feature.

Background image on scroll in elementor how to add background image in elementor [easy steps] from the plus addons for elementor

First, ensure you have The Plus Addons for Elementor plugin installed and activated on your WordPress website.

Edit the page where you want the scrolling effect with Elementor.

Search for the Horizontal Scroll widget in the Elementor panel and drag it onto your page.

The Plus Addons offers pre-designed templates to get you started quickly.

In the widget settings, go to Content > Select Template and choose a template that suits your design.

To activate the background image change effect, go to Scrolling Options and turn on the Background Transition toggle.

Scrolling options how to add background image in elementor [easy steps] from the plus addons for elementor

You’ll see a list of items. Each item represents a section within your horizontal scroll, and you can set a different background image for each.

Click on an item to edit its settings, and upload your desired background image.

To create more sections with different background images, click the + Add Item button. You can add as many items as you need to create your desired scrolling effect.

Add item button how to add background image in elementor [easy steps] from the plus addons for elementor

Control the smoothness of the background transitions by adjusting the Background Transition Duration value.

This determines how long it takes for one background image to fade into the next.

Once you’re satisfied with your setup, click the Apply button at the top of the content tab to save your changes.

Now, when visitors scroll through the Horizontal Scroll section on your page, the background image will dynamically change.

Detailed step-by-step guide here: How to Change the Background Image on Scroll in Elementor Horizontal Page Scroll?

How to Change Background Image on Hover in Elementor?

If you want to add a touch of interactivity and visual flair to your website, changing background images on hover can create a dynamic and engaging user experience.

With the Animated Service Boxes widget from The Plus Addons for Elementor, achieving this effect is a breeze.

Background image on hover in elementor how to add background image in elementor [easy steps] from the plus addons for elementor

Begin by installing and activating The Plus Addons for Elementor plugin on your WordPress site.

Edit the page where you want the hover effect and add the “Animated Service Boxes” widget from the Elementor panel.

In the widget settings, navigate to Content > Main Style > Hover Style.

Hover style how to add background image in elementor [easy steps] from the plus addons for elementor

Under Animated Service Boxes, you’ll see a list of items. Each item represents a service box.

Click on an item to edit its settings, and under you can upload a different image for the Hover.

This image will appear when a user hovers their mouse over the service box. Customize each service box with its own unique hover background image.

Animated service how to add background image in elementor [easy steps] from the plus addons for elementor

With simple steps, you can create an interactive and visually appealing experience for your website visitors.

As they hover over each service box, the background image will change to create a dynamic effect.

Detailed step-by-step guide here: How to Change Background Image on Hover in Elementor?

20 checklist for wordpress site maintenance how to add background image in elementor [easy steps] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​



    Wrapping Up

    Background images are a powerful way to improve your website’s visual appeal and create a more engaging user experience. They can set the tone of your site, reinforce your brand identity, and even improve readability.

    As we’ve explored, Elementor provides a user-friendly way to add background images to your entire website, individual pages, and even specific sections or columns.

    To take your background images to the next level, you can leverage the Horizontal Scroll and Animated Service Boxes Elementor widgets from The Plus Addons for Elementor.

    These can help you create dynamic and interactive background effects, such as changing images on scroll or hover.

    However, The Plus Addons for Elementor doesn’t stop at just two widgets. This all-in-one plugin offers a vast library of over 120+ Elementor widgets, helping you to improve every aspect of your website’s design and functionality.

    Explore The Plus Addons for Elementor and learn more about the endless possibilities for creating a truly unique and captivating online presence.

    Check out the Complete List of 120+ Widgets and Extensions here. Start building your dream website without coding!

    FAQs on Adding Background Images in Elementor

    What are the best dimensions for a background image in Elementor?

    For optimal display, use high-quality images at least 1920px wide. Adjust size settings in Elementor to balance quality and loading speed.

    What is the difference between background and background overlay?

    In Elementor, a background is the base image, while an overlay is an additional layer enhancing readability or effects. Overlays can be solid colors, gradients, or patterns.

    How do I remove the background image in Elementor?

    To remove a background image in Elementor, go to the section, column, or page settings, locate the background option, and click the bin icon to delete it, or replace it. Save changes.

    How to make a background image responsive in Elementor?

    Elementor automatically makes background images responsive, scaling them for different screens. Use responsive layout controls for further adjustments.

    Is it possible to add multiple background images in Elementor?

    While adding multiple background images to an entire website isn’t a built-in feature in Elementor, you can achieve this effect within specific sections. For a more dynamic effect, you can use the Horizontal Scroll widget from The Plus Addons for Elementor to create background image scrolls in sections.

    How do I apply a parallax effect to a background image in Elementor?

    Applying a parallax effect to your background images can add depth and visual interest to your website. To easily achieve this, use the Parallax Scrolling Background widget from The Plus Addons for Elementor. This widget allows you to create stunning attractive elements with parallax effects and various customization options.

    What image formats are supported for backgrounds in Elementor?

    Elementor is versatile in handling various image formats for your website’s backgrounds. You can use common formats like JPG, PNG, and GIF for standard images for sections. For more complex images requiring vector graphics or transparency, SVG is also supported to provide flexibility and visual quality in your designs.

    Can I use a video as a background instead of an image in Elementor?

    Yes. While Elementor doesn’t natively support video backgrounds, you can easily add them using the dedicated Video Background widget from The Plus Addons for Elementor. This widget allows you to integrate background video into your website’s design. It offers various customization options that allow you to match the background to your website’s aesthetic.

    Why is my Elementor background image not showing?

    If your Elementor background image isn’t showing, ensure it’s uploaded correctly, check section settings, clear your cache, and inspect for code conflicts.

    Related Blogs