How to Add a Background Image in WordPress

[aaron]

How to Add a Background Image Using the WordPress Theme Customizer

The WordPress Theme Customizer is a built-in feature that lets you add a custom background image, create menus, and change color schemes. However, this feature is only available for classic free WordPress themes, such as Twenty Twenty, Twenty Fifteen, and Twenty Seventeen.

For this tutorial, we will go over the steps to add an image background via this WordPress feature and use the Twenty Fifteen theme, as it comes with custom background support:

1. Log in to your WordPress admin page and navigate to Appearance → Customize.
2. In the Theme Customizer screen, navigate to the Background Image option.
3. Click the Select image button to open the Media Library.
4. In the Media Library screen, pick a picture or add a new image and click Choose image.
5. Use the image customization options to adjust the background position, preset, and size.
6. Save the changes.

How to Add Background Images With the WordPress Editor

You can also add a background image via the default WordPress editor, also known as Gutenberg. As it provides the tools to create a website using a block-based approach, it is a relatively simple method.

For this tutorial, we will use the Twenty Twenty-Two theme. Follow the steps below to insert an image background using the block editor:

1. From the WordPress dashboard, navigate to Pages → All Pages. Open a page by clicking on the title.
2. Open the Block Inserter button and add the Cover block.
3. To make a full-width background image, select the Cover block and choose Align → Full Width.
4. Insert elements you want on your page. For example, we added several WordPress block patterns.
5. Group the block patterns with the Cover block. It should look like this:
6. Select the Cover block and click Add Media. Then, choose Open Media Library.
7. In the WordPress Media Library screen, choose your preferred image. We recommend adding alt text to your image for better accessibility. Then, click Select.
8. Open the block settings panel to customize the Cover block. For example, we set the position to a fixed background and adjusted the overlay opacity to 50.
9. Save the changes.

How to Add a Custom Background Image Using a Page Builder

Another easy way to add custom backgrounds is by using a WordPress page builder. Elementor is one of the most popular WordPress page builders that provides powerful yet user-friendly features, like a drag-and-drop editor and advanced element customization options.

In this section, we will cover the steps on how to set a background image with the Elementor page builder:

1. Create a blank template and add elements to the editor. For example, we added a text editor, button, and image carousel elements.
2. Go to the editor’s left sidebar and select the hamburger menu icon. Then, click Site settings.
3. Navigate to the Settings section → Background settings.
4. Go to the Background Type section and click the Classic option.
5. Click the area under the Image section or select Choose Image.
6. Choose an image from the Media Library and click Insert Media.
7. Customize the background image to suit your preferences. For instance, you may change the background image size, position, and attachment.
8. Save the changes.

How to Add a WordPress Background Image With CSS

Let’s go over the steps of adding a background image using Additional CSS, one of the WordPress Theme Customizer features:

1. From the WordPress dashboard, navigate to Appearance → Customize.
2. In the Theme Customizer screen, click Additional CSS.
3. Type the following CSS code in the text editor:

body {
background-image: url(example.com/wordpress-background-image/);
}

Change the URL within the brackets with your preferred background image URL.

4. If the image doesn’t suit your preferences, add the following CSS code:

body {
background-attachment: fixed;
background-size: cover;
}

5. Save the Changes.

Join ellohost