Completely Free Course

Or log in with email below...

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

Or sign up with email below...

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Add Background Images And Overlays In Elementor

Action Plan

Step 1: Add Background Images With Overlays

Watch Our Video Tutorial For This Step

This video will walk you through how to add background images in Elementor. We will start with our recommended background image size, cropping aspect ratio, and photo effects using the BeFunky photo editor. Then we will discuss our recommended background image settings and background overlay settings in Elementor.

Video Summary

  • Visit BeFunky
  • Crop your background photo using an aspect ratio of 16:9 (0:58)
  • Resize your background photo using a width of 1600 pixels (1:30)
  • Change the background photo to black and white when using background overlays (1:50)
  • Add other effects such as vignette, blurred edges, and full blur (2:23)
  • Save and compress the background photo (3:13)
  • Add your background photo to a section in Elementor (3:58)
  • Adjust the background photo position (4:25)
  • Change the background photo to “Fixed” so that it stays stationary while scrolling (4:53)
  • Use the “Cover” setting to stretch the background photo to the entire section (5:20)
  • Add a gradient overlay (5:40)
  • Adjust the opacity using a value between 0.7 – 0.9 (6:05)
  • Adjust the gradient angle (6:35)
  • Choose between “Linear” and “Radial” gradient (6:45)
  • Use the location bars to adjust the gradient (6:52)

(I added a background image with overlay in Elementor)

Step 2: Add Repeating Background Patterns With Overlays Using Patterncooler

Visit Patterncooler

Patterncooler is our favorite website for finding cool patterns and textures for repeating backgrounds.

Watch Our Video Tutorial For This Step

This video will walk you through how to use Patterncooler to find patterns and textures, use BeFunky to convert your patters to black and white, and then create a repeating background in Elementor.

Video Summary

  • Visit Patterncooler
  • Go to Styles > Simple (0:26)
  • We will convert the pattern to black and white before adding it to Elementor (0:40)
  • Click the circle in the middle to remove or change the texture (1:05)
  • Go to “Edit Colors” and click the “Shuffle” button to adjust the pattern (1:25)
  • Click “Download Options” and download the image in PNG format (1:55)
  • Visit BeFunky (2:36)
  • Go to Effect > Black & White > Black & White 1 and click “Apply” (2:51)
  • Save the image as PNG (3:10)
  • Visit TinyPNG to compress the PNG image (3:37)
  • Add the new pattern image to a section in Elementor (4:13)
  • Make sure Position, Attachment, Repeat, and Size are all set to “Default” (4:50)
  • Click “Background Overlay” to adjust the overlay settings (5:13)
  • Adjust the opacity (5:20)
  • Chang the “Type” to be “Radial” and adjust the two “Location” settings (5:34)

(I added a background pattern with overlay in Elementor)

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress

Your Achievements

You have earned 0 badges

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commissions we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not associated with SiteGround or Elementor in any way.