How to Change Background Image in Elementor

Have you ever been working on a site and thought, “Man, this scene is so boring? It needs some colors!” Well, if that happens to you or anyone who works with websites often, it means there’s something wrong with how we make them.

But thankfully, Elementor makes things a bit better in regards to that. This excellent page builder comes with a feature called Background Images, which allows you to add a picture as the background of any page element.

That way, you can spice up your designs and give your users an engaging experience. In this blog post, we’ll show you how to use the background images feature of Elementor to change your background image efficiently.

What Is A Background Image in Elementor?

The background image in Elementor is a single image applied to a page element such as a row or a column. You can use it to add some color to your site and transform plain pages into exciting designs.

What Is A Background Image in Elementor

The background images feature lets you add a parallax effect to your pages. This is done by displaying different images in the background of different page elements. This way, you can create a more complex design that leaves a lasting impression on your users.

There are many ways to use the background image feature. You can use it to create a more visually appealing design, brand your website, or even improve the user experience. You can use the image as an overlay that helps you to bring more life to your page.

How to Change Background Image in Elementor for Entire page

You can change the elementor backgrounds image using these simple steps:

Step 1. Open Elementor Page

Step 2. Click the Setting icon in the lower left of the editor Panel.

Step 3. Click the Style tab

Step 4. Click the + icon to change the Background image

add background image in elementor

How to Change Background Image in Elementor for Section

To change the background image of a section in elementor, follow the steps below:

Step 1. Open section setting by clicking on the section setting icon

Step 2. Go to Style > Background > Background Type > Classic in editor panel

Step 3. Under the image, click the + sign and choose your image.

add background image in elementor for section

When to Use a Background Image in Elementor

We’ve mentioned that you can use a background image for many different purposes. But when should you use it for each purpose? Let’s find out.

Branding: A background image is one of the best ways to brand your website. You can use an image with your logo or a slogan and make it the background of each page. This will make it appear on every page of your website and help people remember your brand and your name.

Visual Effect: A background image can be used to create a visual effect on your website. You can use an eye-catching image that draws your users’ attention. This can transform an ordinary page into something more engaging and attractive.

User Experience: A background image can also be used to improve the user experience. You can use an image that conveys information or helps your users. This can be an image of a person or even just text that gives information to the user. This way, you’re helping the user understand your website better and find information more easily.

You may Like:

How to Change Link Color in Elementor

How to Use Z-Index in Elementor

How to Edit Header and Footer with Elementor

How To Duplicate A Page In Elementor

Where to Find Free Images for Your Elementor Background

There are many websites where you can find free images for your website, but not all of them are safe to use.

Many legal issues are also involved in using copyrighted images, so you should be aware before grabbing a photo from the internet.

There are a few places to find free images for your website. The first one is the Unsplash website. This website is a massive database of free images you can use for commercial purposes. You can navigate the website and find the most appropriate image.

Another way to find free images is to use Google Images. Google images is a search engine that allows you to find images online. Just navigate to Google Images and type in the name of the image you want to use. Then click “Search,” and you’ll see many images appear. You can click on the image and see its source.

elementor background image

FAQ(How to Change background image in Elementor)

How do I change the size of the background image in an Elementor?

You can set the background image’s height to fit on any device by going to Section > Layout. Then, you can manually set the height in pixels to match the height to appear on all devices.

Elementor background image not showing?

When you switched your site to a live domain, your image lost its link. The Url for the photo appears to be missing—you should be able to locate the image and upload it as a background in Elementor again, and it should work for you.

How do you make a background image transparent in Elementor?

From Section > Style > Background Overlay, you can choose a basic color overlay or adjust its opacity after you’ve uploaded an image to Elementor to make it transparent.

How do you make a background image black and white in Elementor?

Creating a black and white background image using Elementor is pretty simple. All you have to set the Saturation property to zero (found in the CSS Style section), and you’ll get a pure black and white photo.


We hope you’ve enjoyed reading this blog post about changing background images in Elementor. If you’re still new to Elementor, we recommend visiting the website, where you’ll find many helpful tutorials and guides that can help you improve your design.

You can use the background image feature to transform your designs and make them more visually appealing. You can use it to brand your website and leave a lasting impression on your users.

But most importantly, you can use it to improve the user experience and help your users navigate your site more easily. There are many ways to use the background image feature. You can use it to create a more visually appealing design, brand your website, or even improve the user experience.

You May Like:

How to Set Up Elementor Anchor Links

How to Make Accordion Closed by Default Elementor

Bilal, a versatile Full Stack Developer and SEO expert, co-founded WebTalkHub. When he's not optimizing websites, you'll find him embracing a fitness routine, diving into books, and exploring new horizons through travel.

Leave a Comment