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:
- Start on the WordPress Dashboard
- Click Pages
- Open a Page in “Edit with Elementor“
- Click the Burger Icon on the top left bar
- Go to Site Settings
- Background
- Then set your chosen background by using the Media Library.
- Set up the background as you’d like by using the position, attachment, repeat, and size settings.
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”.
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.
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.
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.
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.
