Do you wish to add a background picture to your WordPress web site?

Background pictures could make your web site look extra partaking and vibrant.

On this article, we’ll present you learn how to simply add a background picture to your WordPress web site.

Why Add a WordPress Background Picture?

Including a picture to your WordPress web site could make it extra engaging to guests. You possibly can rapidly seize customers’ consideration and interact them together with your content material.

It additionally permits you to personalize your web site design in response to your model. For instance, you may add delicate images of your merchandise or model mascot within the background.

Moreover, it’s also possible to add a YouTube video as full background or a picture slideshow that can deliver your content material to life.

Nevertheless, we do counsel deciding on background pictures that aren’t distracting or make it exhausting to learn the content material in your WordPress weblog. A background ought to improve the person expertise and assist ship your message to guests.

It’s additionally essential to decide on a background picture that’s cell pleasant and gained’t influence your web site velocity. In any other case, it is going to damage your WordPress search engine optimization.

That mentioned, let’s have a look at other ways you may add a WordPress background picture. We’ll cowl a number of strategies together with the usage of the WordPress theme customizer, full web site editor, a plugin, theme builder, and extra.

Merely click on a hyperlink beneath to leap forward to your most popular part:

Methodology 1. Add a Background Picture Utilizing Your WordPress Theme Customizer

Hottest WordPress themes include customized background assist. This characteristic permits you to simply set a background picture, and we suggest this methodology in case your theme helps it.

Nevertheless, in case your customizer menu possibility is lacking, then your theme could have full web site enhancing enabled. Within the subsequent part, we’ll cowl learn how to use the complete web site editor to vary your background picture.

To make use of the Customizer, it’s worthwhile to go to the Look » Customise web page in your WordPress admin. This can launch the WordPress theme customizer the place you may change completely different theme settings whereas viewing a stay preview of your web site.

An essential factor to recollect is that the choices you see will range based mostly on the WordPress theme you’re utilizing. For this tutorial, we’re utilizing the Astra theme.

In the event you’re utilizing a special theme, then you might have to lookup that theme’s documentation or contact the theme developer to learn the way so as to add a background picture in the event you can’t discover it within the customizer.

Within the Astra theme’s customizer choices, it’s worthwhile to click on on ‘International’ within the panel to the left.

After that, you’ll see completely different International choices to customise your Astra theme.

Go forward and click on into the ‘Colours’ part.

Right here, you may change the theme colours, together with the background coloration. You may as well customise your hyperlinks, physique textual content, headings, borders, and extra.

So as to add a background picture, scroll right down to the ‘Floor Colour’ part. Then you may click on on the ‘Web site Background’ possibility and change to the ‘Picture’ tab.

After that, merely click on the ‘Choose Background Picture’ button.

This can deliver up the WordPress media library, the place you may add a picture out of your laptop or choose one you have got beforehand uploaded.

After you have got chosen the picture in your background, it’s worthwhile to click on on the ‘Choose’ button.

This can shut the media popup, and you will note a preview of your chosen background picture within the theme customizer.

Don’t overlook to click on on the ‘Publish’ button on the high to retailer your settings.

That’s all. You will have efficiently added a background picture to your WordPress web site. Go forward and go to your web site to see it in motion.

Methodology 2. Add a Customized Background Picture Utilizing Full Web site Editor

In the event you’re utilizing a block-based WordPress theme, then you may add a customized background picture utilizing the complete web site editor (FSE).

The complete web site editor permits you to edit your web site design utilizing blocks. It is rather like enhancing a weblog submit or web page utilizing the WordPress block editor.

For this tutorial, we’ll use the default Twenty Twenty-Two theme. To launch the complete web site editor, merely go to Look » Editor out of your WordPress dashboard.

When you’re within the full web site editor, you’ll want so as to add a Cowl block to your template to add a background picture.

Merely click on the ‘+’ signal on the high and add a Cowl block.

Go forward and click on ‘Add’ or ‘Media Library’ button within the Cowl block so as to add a background picture to the block.

This can open the WordPress media uploader popup.

You possibly can select a picture that you simply’d like to make use of as the web site background.

When you have got chosen the picture, merely click on on the ‘Choose’ button.

As soon as the picture is added to the Cowl block, the subsequent step is to set it because the background of the web page.

To take action, click on on the Listing View icon on the high (icon with 3 dashes) to open an overview view of theme parts, akin to the positioning header and footer.

After that, merely drag and drop all of the template parts beneath the Cowl block within the listing view.

When they’re all beneath there, the Cowl block’s picture will present up as the positioning’s background.

After that, you may alter the background picture by clicking into the Cowl block and deciding on the gear icon within the high proper nook of the display screen. This opens the Block settings panel.

One can find choices to make the picture a set background, repeated background, alter its overlay, edit the colour, and extra.

Whenever you’re finished, don’t overlook to click on the ‘Save’ button.

That’s it! You’ve efficiently added a background picture utilizing the complete web site editor.

Methodology 3. Add Background Picture Utilizing WordPress Theme Builder

One other manner you may add customized background pictures to your web site is through the use of a WordPress theme builder like SeedProd.

It’s the finest WordPress touchdown web page plugin and web site builder. You get drag and drop performance to simply customise your web site design with out touching a single line of code.

For this tutorial, we’ll use the SeedProd Professional model as a result of it contains the theme builder. There’s additionally a SeedProd Lite model that you may attempt totally free.

First, you’ll want to put in and activate the SeedProd plugin. In the event you need assistance, then please see our information on learn how to set up a WordPress plugin.

As soon as the plugin is energetic, you’ll see the SeedProd welcome display screen in your WordPress dashboard. Subsequent, merely enter your license key and click on the ‘Confirm Key’ button. You will discover the license key in your SeedProd account space.

Subsequent, you’ll want to go to SeedProd » Theme Builder in your WordPress admin panel.

Go forward and click on the ‘Themes’ button on the high.

SeedProd will now provide a number of theme templates to select from.

You possibly can hover over any template that you simply’d like to make use of and click on on it. Let’s use the ‘Starter’ theme template for this tutorial.

From right here, SeedProd will generate completely different templates such because the homepage, single submit, single web page, sidebar, header, and extra.

So as to add a background picture that seems on the complete web site and on all of the theme templates, go forward and click on the ‘Edit Design’ possibility beneath International CSS.

On the subsequent display screen, you’ll see international CSS settings you may change.

Merely click on on the ‘Background’ possibility.

After that, you’ll see the Background Picture choices.

Go forward and click on the ‘Use Your Personal Picture’ button to add your image or click on the ‘Use a Inventory Picture’ button to seek for a inventory picture to make use of as your web site background.

When you’ve added a background picture, the SeedProd builder will show a stay preview.

The plugin additionally affords choices to vary the Background Place. You possibly can select whether or not you’d like to make use of the complete display screen cowl, put it on repeat, and extra.

Plus, you may edit how darkish the background picture ought to be by shifting the ‘Dim Background’ slider. The upper the rating, the darker the picture might be.

Whenever you’re finished enhancing the background picture, merely click on the ‘Save’ button on the high and shut the International CSS Settings.

If you wish to add a customized background picture for various elements of your web site, then you may edit these particular person theme templates in SeedProd.

For extra particulars, please see our information on learn how to simply create a customized WordPress theme.

Methodology 4. Add a Customized Background Picture in WordPress Utilizing a Plugin

Utilizing a WordPress plugin so as to add a background picture is much more versatile than built-in WordPress choices.

To start, it’s worthwhile to set up and activate the Full Display Background Professional plugin. For extra particulars, see our step-by-step information on learn how to set up a WordPress plugin.

This plugin will allow you to set a special background for any submit, web page, class, and extra. Plus, they are going to mechanically be full-screen and alter themselves for cell units.

Upon activation, it’s worthwhile to go to Look » Fullscreen BG Picture to configure the plugin settings.

You can be requested so as to add your license key. You may get this info from the e-mail you acquired after shopping for the plugin or out of your account on the plugin’s web site.

Subsequent, it’s worthwhile to click on on the ‘Save Choices’ button to activate your key. You at the moment are prepared to begin including background pictures to your WordPress web site.

Go forward and click on on the ‘Add New Picture’ button on the plugin’s settings web page.

You need to now see the background picture add display screen.

Click on on the ‘Select Picture’ button to add or choose a picture. As quickly as you choose the picture, it is possible for you to to see a stay preview of the picture in your display screen.

Subsequent, it’s worthwhile to present a reputation for this picture. This title is only for you, so you may sort something right here. Lastly, it’s worthwhile to choose the place you wish to use this because the background web page.

Upon getting chosen whether or not it is going to be the background for the entire web site, for posts, classes, archives, or elsewhere, don’t overlook to save lots of your adjustments.

You possibly can add as many pictures as you wish to completely different areas of your web site by visiting the Look » Fullscreen BG Picture web page and repeating this course of.

In the event you set a couple of picture for use globally or for posts, pages, and classes, then the plugin will mechanically begin displaying background pictures as a slideshow.

You possibly can alter the time it takes for a picture to fade out and the time after which a brand new background picture begins to fade within the plugin Settings.

The time you enter right here is in milliseconds. 1 second is 1000 milliseconds. If you’d like a background picture to fade out after 20 seconds, then you’ll need to enter 20000.

Don’t overlook to click on on the ‘Save Choices’ button to retailer your adjustments.

Background Pictures for Posts, Pages, and Classes

Full Display Background Professional additionally permits you to set background pictures for single posts, pages, classes, tags, and extra.

Simply edit the submit/web page the place you wish to show a special background picture. On the submit edit display screen, you’ll discover the brand new ‘Full Display Background Picture’ field beneath the submit editor.

To make use of a background picture for classes, posts, and pages, it’s worthwhile to go to the Look » Fullscreen BG Picture web page after which click on on the ‘Add New Picture’ button.

After importing your picture, you may choose a class, posts, pages, archives, and different choices from the ‘Select the context on which to show this picture’ dropdown menu.

Let’s say you wish to present a background picture for class pages. For this, merely choose ‘Class’ from the dropdown menu.

The plugin additionally affords an possibility to limit the background picture to particular classes, posts, and pages.

For instance, if you wish to add a customized background picture for particular classes, then merely enter the class names beneath the ‘Choose the Classes to limit pictures to’ subject.

Don’t overlook to save lots of your picture to retailer your settings.

You’ve now efficiently added a background picture for particular posts, pages, and classes.

Methodology 5. Add Background Pictures Utilizing CSS Hero

CSS Hero is a WordPress plugin that permits you to make any adjustments to your theme with out touching a single line of code.

You possibly can add background pictures rapidly in a number of easy steps. First, it’s worthwhile to set up and activate CSS Hero. For extra particulars, please see our information on learn how to set up a WordPress plugin.

When you’ve finished that, it’s time to begin customizing your web site. Now open up your homepage in your browser. You’ll see the ‘Customise with CSS Hero’ hyperlink in your admin bar.

After you click on that hyperlink, you’ll see the CSS Hero choices open up. Hover your mouse over the realm you wish to add a picture to.

Whenever you click on the chosen space, you may see the ‘Background’ possibility within the left sidebar.

Go forward and click on ‘Background’ to see the settings for including a picture.

From there, you may click on on ‘Picture.’ Now, you may select a picture from Unsplash or add your individual to create your background.

Whenever you click on on the picture you need, you’ll see the ‘Apply Picture’ button. Then you may select what measurement you need your picture to be. You possibly can select the big model so it is going to stretch throughout the web page.

Hit ‘Save and Publish’ on the backside to save lots of the background picture in your web site.

Methodology 6. Add Customized Background Pictures Wherever in WordPress Utilizing CSS Code

By default, WordPress provides a number of CSS lessons to completely different HTML parts all through your WordPress web site. You possibly can simply add customized background pictures to particular person posts, classes, authors, and different pages utilizing these WordPress generated CSS lessons.

For instance, When you have a class in your web site known as TV, then WordPress will mechanically add these CSS lessons to the physique tag when somebody views the TV class web page.

<physique class="archive class category-tv category-4">

You need to use the examine instrument to see precisely which CSS lessons are added by WordPress to the physique tag.

You need to use both category-tv or category-4 CSS class to model simply this class web page otherwise.

Let’s add a customized background picture to a class archive web page. You will want so as to add this practice CSS to your theme.

physique.category-tv 
background-image: url("https://instance.com/wp-content/uploads/2017/03/your-background-image.jpg");
background-position: middle middle;
background-size: cowl;
background-repeat: no-repeat;
background-attachment: fastened;

Don’t overlook to interchange the background picture URL and the class class with ones from your individual web site.

You may as well add customized backgrounds to particular person posts and pages. WordPress provides a CSS class with the submit or web page ID within the physique tag. You need to use the identical CSS code, simply exchange .category-tv with the post-specific CSS class.

We hope this text helped you learn to add a background picture in WordPress. You may additionally wish to see our information on learn how to begin a web based retailer and the perfect web site design software program.

In the event you favored this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You may as well discover us on Twitter and Fb.