How to Add Background Videos and Images in WordPress Hero Section

This article explains how to add background videos and images to sections in your WordPress website using the Elementor editor. You'll learn how to select and upload background images, add videos with fallback images, and adjust display settings to create visually appealing backgrounds.

Accessing the Elementor Editor

To begin, log in to your WordPress dashboard and navigate to your homepage. Hover over the header section you want to edit, then click on "Edit with Elementor" to open the page editor.

Adding a Background Image

1. In the Elementor editor, locate the header section you wish to customise.
2. Select the section, then click the "Style" tab in the sidebar.
3. Under "Background," choose the "Classic" option to add an image.
4. Click on the image area to open the media library and select the desired image.
5. Adjust the position (left, center, right, top, middle) and display size (cover, contain) to fit your design.
6. Publish or update the page and refresh your homepage to see the changes.

Adding a Background Video

To add a video background, you need:

• A video URL (hosted on Vimeo or YouTube)
• A fall-back background image (displayed when the video cannot load)

Steps:

1. Obtain your video URL by uploading your video to Vimeo or YouTube. For Vimeo, free accounts allow uploading up to 3-4 videos. Alternatively, you can send us your video, and we will upload it to our Vimeo account and share the video link with you or upload it on your behalf.
2. In Elementor, select the header section and go to the "Style" tab.
3. Click "Background Type" and select the "Video" option.
4. Paste the video URL in the "Video Link" field.
5. Publish/update the page.
6. To add a fall-back image, click the fall-back image area and choose an image. This image will display if the video fails to load.
7. Publish the changes and refresh your homepage to see the background video with its fall-back image in action.

  Notes: Always add a fall-back image when using background videos to ensure a graceful fall-back on slower connections or unsupported devices.
  Adjust the background position and display settings for images to ensure the background looks good on all screen sizes.

  Ideas: Use short, optimised videos to reduce loading times and improve website performance.
  Consider auto-playing looping muted videos for a seamless background experience.

  Other articles you might be interested in: How to Change a Background image on a specific resolution or device resolution