6 Easy How to Add a Background Image in WordPress

Do you want to include a history picture for your WordPress website?

History pictures can make your website appearance more vibrant and engaging.

In this article, we'll show you how to easily include a history picture for your WordPress website.

Why Include a WordPress History Picture?

Including a picture for your WordPress website can make it more attractive to site visitors. You can quickly grab users' attention and involve them with your content.

It also allows you to customize your website design inning accordance with your brand name. For instance, you can submit refined pictures of your items or brand name mascot behind-the-scenes.

Furthermore, you can also include a YouTube video clip as complete history or a picture slideshow that will bring your content to life.

However, we do recommend choosing history pictures that are not distracting or make it hard to read the content on your WordPress blog site. A history should improve the user experience and help deliver your message to site visitors.

It is also important to choose a history picture that is mobile pleasant and will not impact your website speed. Or else, it will hurt your WordPress SEO.

That said, let's appearance at various ways you can include a WordPress history picture. We will cover several techniques consisting of the use the WordPress theme customizer, complete website editor, a plugin, theme more, and builder.

Technique 1. Include a History Picture Using Your WordPress Theme Customizer

Most popular WordPress themes come with custom history support. This feature allows you to easily set a history picture, and we suggest this technique if your theme supports it.

However, if your customizer food selection option is missing out on, after that your theme may have complete website modifying allowed. In the next area, we will cover how to use the complete website editor to change your history picture.

To use the Customizer, you need to visit the Look » Personalize web page in your WordPress admin. This will introduce the WordPress theme customizer where you can change various theme setups while viewing an online sneak peek of your website.

An important point to keep in mind is that the options you see will differ based upon the WordPress theme you are using. For this tutorial, we are using the Astra theme.

If you are using a various theme, after that you might need to search for that theme's paperwork or contact the theme designer to find out how to include a history picture if you can't find it in the customizer.

In the Astra theme's customizer options, you need to click ‘Global' in the panel to the left.

After that, you will see various Global options to personalize your Astra theme.

Go on and click right into the ‘Colors' area.

Here, you can change the theme shades, consisting of the history color. You can also personalize your links, body text, headings, more, and boundaries.

To include a history picture, scroll to the ‘Surface Color' area. After that you can click the ‘Site Background' option and switch to the ‘Image' tab.

After that, simply click the ‘Select History Image' switch.

This will raise the WordPress media collection, where you can submit a picture from your computer system or select one you have formerly submitted.

After you have chosen the picture for your history, you need to click the ‘Select' switch.

This will shut the media popup, and you'll see a sneak peek of your selected history picture in the theme customizer.

Remember to click the ‘Publish' switch on top to store your setups.

That is all. You have effectively included a history picture for your WordPress website. Go on and visit your website to see it at work.

Technique 2. Include a Custom History Picture Using Complete Website Editor

If you are using a block-based WordPress theme, after that you can include a customized history picture using the complete website editor (FSE).

The complete website editor allows you to modify your website design using obstructs. It's much like modifying an article or web page using the WordPress obstruct editor.

For this tutorial, we will use the default Twenty Twenty-Two theme. To introduce the complete website editor, simply most likely to Look » Editor from your WordPress control panel.

Once you are in the complete website editor, you will need to include a Cover obstruct for your template to submit a history picture.

Simply click the ‘+' sign on top and include a Cover obstruct.

Go on and click ‘Upload' or ‘Media Library' switch in the Cover obstruct to include a history picture to the obstruct.

This will open up the WordPress media uploader popup.

You can choose a picture that you had prefer to use as the website history.

When you have chosen the picture, simply click the ‘Select' switch.

Once the picture is included to the Cover obstruct, the next step is to set it as the history of the web page.

To do so, click the List View symbol on top (symbol with 3 dashboards) to open up an outline view of theme aspects, such as the website footer and header.

After that, simply drag and drop all the template aspects under the Cover obstruct in the list view.

When they are all under there, the Cover block's picture will show up as the site's history.

 

After that, you can change the history picture by clicking right into the Cover obstruct and choosing the equipment symbol in the top right corner of the screen. This opens up the Obstruct setups panel.

You'll find options to earn the picture a fixed history, duplicated history, change its overlay, modify the more, and color.

When you are done, remember to click the ‘Save' switch.

That is it! You've effectively included a history picture using the complete website editor.

Technique 3. Include History Picture Using WordPress Theme Builder

Another way you can include custom history pictures for your website is by using a WordPress theme builder such as SeedProd.

It's the best WordPress touchdown web page website builder and plugin. You obtain drag and drop functionality to easily personalize your website design without touching a solitary line of code.

For this tutorial, we will use the SeedProd Professional variation because it consists of the theme builder. There's also a SeedProd Lite variation that you could try free of charge.

First, you will need to install and activate the SeedProd plugin. If you need help, after that please see our guide on how to install a WordPress plugin.

Once the plugin is energetic, you will see the SeedProd invite screen in your WordPress control panel. Next, simply enter your license key and click the ‘Verify Key' switch. You can find the license type in your SeedProd account location.

Next, you will need to go to SeedProd » Theme Builder in your WordPress admin panel.

Go on and click the ‘Themes' switch on top.

SeedProd will currently offer several theme design themes to choose from.

You can hover over any template that you had prefer to use and click it. Let's use the ‘Starter' theme template for this tutorial.

From here, SeedProd will produce various design themes such as the homepage, solitary post, solitary web page, sidebar, more, and header.

To include a history picture that shows up on the whole website and on all the theme design themes, go on and click the ‘Edit Design' option under Global CSS.

On the next screen, you will see global CSS setups you can change.

Simply click the ‘Background' option.

After that, you will see the History Picture options.

Go on and click the ‘Use Your Own Image' switch to submit your picture or click the ‘Use a Stock Image' switch to look for a stock picture to use as your website history.

Once you've included a history picture, the SeedProd builder will display an online sneak peek.

The plugin also offers options to change the History Position. You can choose whether you had prefer to use the complete screen cover, put it on more, and duplicate.

Plus, you can modify how dark the history picture should be by moving the ‘Dim Background' slider. The greater ball game, the darker the picture will be.

When you are done modifying the history picture, simply click the ‘Save' switch on top and shut the Global CSS Setups.

If you want to include a customized history picture for various components of your website, after that you can modify those individual theme design themes in SeedProd.

For more information, please see our guide on how to easily produce a customized WordPress theme.

Technique 4. Include a Custom History Picture in WordPress Using a Plugin

Using a WordPress plugin to include a history picture is a great deal more versatile compared to integrated WordPress options.

To start, you need to install and activate the Complete Screen History Professional plugin. For more information, see our detailed guide on how to install a WordPress plugin.

This plugin will let you set a various history for any post, web page, more, and category. Plus, they'll immediately be full-screen and change themselves for mobile devices.

After activation, you need to visit Look » Fullscreen BG Picture to set up the plugin setups.

You'll be asked to include your license key. You can obtain this information from the e-mail you received after buying the plugin or from your account on the plugin's website.

Next, you need to click the ‘Save Options' switch to activate your key. You're currently ready to begin including history pictures for your WordPress website.

Go on and click the ‘Add New Image' switch on the plugin's setups web page.

You should currently see the history picture submit screen.

Click the ‘Choose Image' switch to submit or select a picture. As quickly as you select the picture, you'll have the ability to see an online sneak peek of the picture on your screen.

Next, you need to provide a name for this picture. This name is simply for you, so you can kind anything here. Finally, you need to select where you want to use this as the history web page.

Once you have chosen whether it will be the history for the entire website, for messages, categories, archives, or somewhere else, remember to conserve your changes.

You can include as many pictures as you want to various locations of your website by visiting the Look » Fullscreen BG Picture web page and duplicating this process.

If you set greater than one picture to be used worldwide or for messages, web pages, and categories, after that the plugin will immediately begin showing history pictures as a slideshow.

You can change the moment it considers a picture to discolor out and the moment after which a brand-new history picture begins to discolor in the plugin Setups.

The moment you enter here's in milliseconds. 1 second is 1000 milliseconds. If you want a history picture to discolor out after 20 secs, after that you'll need to enter 20000.

Remember to click the ‘Save Options' switch to store your changes.

History Pictures for Messages, Web pages, and Categories

Complete Screen History Professional also allows you to set history pictures for solitary messages, web pages, categories, more, and tags.

Simply modify the post/web page where you want to display a various history picture. On the post modify screen, you'll notice the new ‘Full Screen History Image' box listed below the post editor.

To use a history picture for categories, messages, and web pages, you need to visit the Look » Fullscreen BG Picture web page and after that click the ‘Add New Image' switch.

After submitting your picture, you can select a classification, messages, web pages, archives, and various other options from the ‘Choose the context on which to display this image' dropdown food selection.

Let's say you want to show a history picture for category web pages. For this, simply select ‘Category' from the dropdown food selection.

The plugin also offers a choice to limit the history picture to specific categories, web pages, and messages.

For instance, if you want to include a customized history picture for specific categories, after that simply enter the category names under the ‘Select the Categories to limit pictures to' area.

Remember to conserve your picture to store your setups.

You've currently effectively included a history picture for specific messages, categories, and web pages.

Technique 5. Include History Pictures Using CSS Hero

CSS Hero is a WordPress plugin that allows you to earn any changes for your theme without touching a solitary line of code.

You can include history pictures quickly in a couple of simple actions. First, you need to install and activate CSS Hero. For more information, please see our guide on how to install a WordPress plugin.

Once you've done that, it is time to begin personalizing your website. Currently open your homepage in your browser. You will see the ‘Customize with CSS Hero' link in your admin bar.

 

After you click that link, you will see the CSS Hero options open. Hover your computer mouse over the location you want to include a picture to.

When you click the selected location, you can see the ‘Background' option in the left sidebar.

Go on and click ‘Background' to see the setups for including a picture.

From there, you can click ‘Image.' Currently, you can choose a picture from Unsplash or submit your own to produce your history.

When you click the picture you want, you will see the ‘Apply Image' switch. After that you can choose what dimension you want your picture to be. You can choose the large variation so it will extend throughout the web page.

Hit ‘Save and Publish' near the bottom to conserve the history picture for your website.

Technique 6. Include Custom History Pictures Throughout WordPress Using CSS Code

By default, WordPress includes several CSS courses to various HTML aspects throughout your WordPress website. You can easily include custom history pictures to individual messages, categories, writers, and various other web pages using these WordPress produced CSS courses.

For instance, If you have actually a classification on your website called TV, after that WordPress will immediately include these CSS courses to the body label when someone views the TV category web page.

1 | <body class="archive category category-tv category-4">

You can use the inspect device to see exactly which CSS courses are included by WordPress to the body label.

You can use either category-tv or category-4 CSS course to design simply this category web page in a different way.

Let's include a customized history picture to a classification archive web page. You'll need to include this custom CSS for your theme.

1| body.category-tv {

2| background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-

   image.jpg");

3| background-position: center center;

4| background-size: cover;

5| background-repeat: no-repeat;

6| background-attachment: fixed;

7| }

Remember to change the history picture URL and the category course with ones from your own website.

You can also include custom histories to individual web pages and messages. WordPress includes a CSS course with the post or web page ID in the body label. You can use the same CSS code, simply change.category-tv with the post-specific CSS course.

We hope this article assisted you learn how to include a history picture in WordPress. You might also want to see our guide on how to begin an on the internet store and the best website design software.