,

Background Images in Elementor

Share This Post

Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp

Table of Contents

How To Add Wordpress Background Image In Elementor
Background Image in Elementor
Elementor Logo

In this article, we will take a look at how to add background images in Elementor.  A background image can add some character to the page and create a different atmosphere to a block of colour or plain white.

One thing that can help to improve the overall look of your website is to add a background to various sections, columns, or pages. I will go over how to add a background in each of the various sections on the site while using Elementor.

How to Add a Background Images in Elementor for the Whole Website​

To add a background for your entire website you can do this by following these instructions: 

  1. Start on the WordPress Dashboard
  2. Click Pages
  3. Open a Page in “Edit with Elementor
  4.  Click the Burger Icon on the top left bar
  5. Go to Site Settings
  6. Background
  7. Then set your chosen background by using the Media Library.
  8. Set up the background as you’d like by using the position, attachment, repeat, and size settings.
Toggle Button
Toggle Button
Site Setting Option Under Toggle Bar
Site setting option
Background Option Under Site Setting In Elementor
Background option under site setting in Elementor
How To Add Background Image For Whole Site
Adding background image for whole site

How to Add a Background Images in Elementor for Individual Page

While on a page, open up the page settings by clicking the “Settings” icons at the bottom left of the screen near the green Publish/ Update button.  You will start on the Settings tab but you will need to change that to the Style tab.

From the Style tab you can select the type of background you would like to add to the page.  This could be a colour, a gradient or an image.

If you choose an image you will be able to adjust the background position, attachment, repeat and size to get it looking as you’d like.

Once finished make sure to click “Save Draft”, “Publish” or “Update”.
Add Images For Page Background
Add images for page background
Sections Tabs
Sections Tabs
Bcakground Options
Bcakground options
How To Add Image Background In A Section
How to add image background in a section

How to Add a Background Images in a Section or Column

In this part, I will go over and explain how to add a background to a section on your WordPress website.

The first thing to do is make sure you can access the section that you would like to change the background on, if you have issues getting to it, be sure to use Navigator.  If you need to create a section you can do that now.

Once you have located and access the section you can click on the Style tab to bring up the background options which will allow you to add a background colour, gradient or image.  If you choose an image you will be able to adjust the background position, attachment, repeat and size to get it looking as you’d like.

Set the Proper Background Image Position

The position of the image can be set, such that the image focuses on one of the 9 locations:

Top left, top center, top right, center left, center right, center right, bottom right, center center and bottom right.

The position of the image helps you to decide to focus on which part of the image in cases where the image has a greater width or height than the segment distance. The image will change position and adjust as the screen size changes so the positioning may vary slightly depending on who is viewing it.

Positioning Options Of Background Image In Elementor
Positioning options of background image
Background Attachment Options In Elmentor
Background attachment options in Elementor

Attachment

You can adjust the background-attachment here. It is always in scroll mode by default. For background-attachment, you’ll have two choices. Fixed and scrolling. If you choose scroll, the image will move along with the content while the user scrolls down or up the page. However, if you choose fixed, the background image will be fixed. As a result, when a user scrolls down or up, the image will stay in place while the text scrolls over it.

Repeat

If a background image doesn’t completely cover an element, background-repeat specifies whether and how the image should be replicated within the element. No-repeat, Repeat, Repeat-x, and Repeat-y are the four choices for background-repeat in Elementor. It’s set to repeat by default. When you choose no-repeat, the background image can no longer repeat itself. The image will be repeated horizontally and vertically if you choose to repeat. When you choose Repeat-x, the image will repeat horizontally. When you choose Repeat-y, the image will repeat vertically.

Background Repeat Options In Elementor
Background repeat options in Elementor
Size Options For Background Image In Elementor
Size options for background image

Set the Website Background Size

In most instances, a background image larger than the actual background is uploaded.

This approach is recommended so that the image remains clearly visible and not broken off at the larger displays on its side.  A general full-screen background image is 1920 x 1080px.

When setting the size of the background you have 3 main options: Auto, Cover, and Contain.  There is also a custom option with which you can drag and position the image as you need but this option does not always work so well for responsive screens.

Each of the sizes shows the background image in a different way.

Auto Image Size

The image size is set to Auto by default.

The background image will be shown in its original size if the Auto size choice is chosen.

In a summary, Auto means there will be no scaling.

If the image is 1,200 pixels wide but the section is only 1000 pixels wide, the image would be cropped to fit on the screen of only 1000 pixels (the top left area by default).

Cover Image Size

If you choose Cover as the image size, the background image will be scaled to fit the entire section, sometimes there maybe white space with the other settings but with Cover this will be… covered.

This suggests that it would most likely be cropped at its maximum height.  It is generally good to use cover for a background image, this is because it ensures that the picture is viewed at the correct size without being overscaled.

In most cases, Cover is the better size choice when using Elementor. Auto may display an enlarged version of the image, while Contain will generally fit the image in so the whole image is visible but this often leave spaces around unless the container is the exact same size.

Contain Image Size

If you chose Contain as the size, the image will be scaled to match both the height and width of the section while maintaining its original proportions.

This may include leaving some white space on the left and right or top and bottoms.  You can choose for the image to repeat to cover everything but this does not always work so well and can end up with the image look disjointed and patched togther.

 

In Elementor, the most common use of background image sizes is to set the background image to Cover and the row, column, or widget minimum height to the required height.

Make Background Images in Elementor Mobile Responsive

By going to Section > Layout, you can adjust the height of the background image.

After that, you can manually adjust the height in pixels to get an identical height that will appear on all devices.

You may also use VH for the height.
Hundredths of a viewport height is defined by VH.

In plain English, this says –

The scale adjusts to the height of the device on which it is shown.
Each VH represents 1% of the overall viewport, resulting in a scale of 100%.

If you set the VH value to 100 percent, the image will still fill the entire screen height, regardless of the screen resolution.

This is excellent for smartphone responsiveness because it ensures that the image fills the whole screen height.

If the content height of a section exceeds the section size, Elementor will display the entire content and the section’s height will be increased.

You can also change the image and have a mobile-specific image, this is often worth doing to ensure the file size of your image is greatly reduced.

Height Options In Section
Height options in Section
How To Set Height For Section
How to set height for section
How To Add Background Video
Adding background video

How to Add Video as Background

You can add a video by changing the background type.

Add a new section, then you will get the option to edit the section. Under layout make the content width “full width” and also set a height as you like. Then from the style tab, select video from the background type. You’ll find space below where you can paste a link to a video like youtube, Vimeo, etc that you want to appear in the background of a particular section. After that, you’ll have more choices, such as the ability to set the video’s start and end times. If you like, you can also turn on or off Play Once, Play On Mobile, and Privacy mode.

Search

Social Media

Recent Posts

Josh

Typically replies in minutes

Hi there,

Feel free to message me if you have any questions.