WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» How to Add a Background Image in WordPress

How to Add a Background Image in WordPress

Last updated on August 6th, 2020 by Editorial Staff
303 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Background Image in WordPress

Do you want to add a background image to your WordPress site?

Background images can be used to make your website look more engaging and aesthetically pleasant.

In this article, we will show you how to easily add a background image to your WordPress site.

How to add a background image in WordPress

Video Tutorial

Subscribe to WPBeginner

If you’d prefer written instructions, then please continue reading.

Method 1. Add a Background Image Using Your WordPress Theme Settings

Most popular WordPress themes come with custom background support. This feature allows you to easily set a background image to your WordPress site.

If your theme supports the custom background feature, then we recommend using this method to add a background image to your WordPress site.

However, if your theme doesn’t support this feature, or you don’t like how it implements background images, then you can try the other options mentioned in our tutorial.

First you need to visit the Appearance » Customize page in your WordPress admin. This will launch the WordPress theme customizer where you can change different theme settings while viewing a live preview of your website.

Background image option in WordPress theme customizer

Next, you need to click on the ‘Background image’ option. The panel will slide in and show you the options to upload or select a background image for your website.

Select background image

Click on the select image button to continue.

This will bring up the WordPress media uploader pop-up where you can upload an image from your computer. You can also select a previously uploaded image from the media library.

Upload background image

Next, you need to click on the choose image button after uploading or selecting the image you want to use as background.

This will close the media uploader pop-up, and you will see your selected image’s preview in the theme customizer.

Background image settings

Below the image, you will also be able to see the background image options. Under ‘Preset,’ you can select how you want the background image to be displayed: fill screen, fit screen, repeat, or custom.

You can also select the background image position by clicking on the arrows below. Clicking on center will align the image to the center of the screen.

Don’t forget to click on the ‘Save & Publish’ button at the top to store your settings. That’s all, you have successfully added a background image to your WordPress site.

Go ahead and visit your website to see it in action.

Method 2. Add a Custom Background Image in WordPress Using a Plugin

This method is a lot more flexible. It works with any WordPress theme and allows you to set multiple background images.

You can also set different backgrounds for any post, page, category, or any other section of your WordPress site.

It automatically makes all your background images full-screen and mobile-responsive. This means your background image will automatically resize itself on smaller devices.

First, you need to install and activate the Full Screen Background Pro plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Appearance » Full Screen BG Image to configure the plugin settings.

Full screen background

You will be asked to add your license key. You can get this information from the email you received after buying the plugin or from your account on the plugin’s website.

Next, you need to click on the ‘Save Settings’ button to store your changes. You are now ready to start adding background images to your WordPress site.

Go ahead and click on the ‘Add New Image’ button on the plugin’s settings page. This will take you to the background image upload screen.

add new background image

Click on the ‘Choose Image’ button to upload or select an image. As soon as you select the image, you will be able to see a live preview of the image on your screen.

Next, you need to provide a name for this image. This name will be used internally, so you can use anything here.

Finally, you need to select where you want this image to be used as the background page.

Full Screen Background Pro allows you to set images as a global background, or you can choose from different sections of your website like categories, archives, front or blog page.

Don’t forget to click on the save image button to save your background image.

You can add as many images as you want by visiting the Appearance » Full Screen BG Image page.

If you set more than one image to be used globally, then the plugin will automatically start displaying background images as a slideshow.

You can adjust the time it takes for an image to fade out and the time after which a new background image starts to fade in.

Background fade in and fade out settings

The time you enter here is in milliseconds. If you want a background image to fade out after 20 seconds, then you will need to enter 20000.

Don’t forget to click on the save settings button to store your changes.

Background Images for Posts, Pages, and Categories

Full Screen Background Pro also allows you to set background images for single posts, pages, categories, tags, and more.

Just edit the post/page where you want to display a different background image. On the post edit screen, you will notice the new ‘Full Screen Background Image’ box below the post editor.

Adding a background image for a single post or page

To use a background image for a specific category, you need to visit the Appearance » Full Screen BG Image page and then click on the ‘Add New Image’ button.

After uploading your image, you can select ‘Category’ as the context where you want to display the background image.

Set background image for a specific category

Now enter the specific category ID or slug where you want to display the image. See our guide on how to find category ID in WordPress.

Don’t forget to save your image to store your settings.

Method 3. Add Background Images using CSS Hero

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

You can add background images quickly in a few simple steps. First, you need to install and activate CSS Hero. Once you’ve done that, it’s time to start customizing your website.

Now open up your homepage in your browser. You’ll see the ‘Customize with CS SHero’ link in your admin bar.

Background Image with CSS Hero

After you click that link, you’ll see the CSS Hero options open up. Hover your mouse over the area you want to add an image to.

In the screenshot below, you’ll see .header-filter-gradient area. When you click this area, you can then choose the background link in the left sidebar.

WordPress background image selector

The background link will open. From there, you can click on ‘Image.’ Now, you can choose an image from Unsplash or from your uploads to create your background.

Add image to background with CSS Her

When you click on the image you want, you’ll see the ‘Apply Image’ button. Then you can choose what size you want your image to be. We chose the large version so it would stretch across the page.

Hit ‘Save and Publish’ at the bottom, and the background image is now saved for your site.

Custom background WordPress image

Method 4. Add Custom Background Images Anywhere in WordPress Using CSS Code

By default, WordPress adds several CSS classes to different HTML elements throughout your WordPress site. You can easily add custom background images to individual posts, categories, author, and other pages using these WordPress generated CSS classes.

For example, If you have a category on your website called TV, then WordPress will automatically add these CSS classes to the body tag when someone views the TV category page.

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

You can use the inspect tool to see exactly which CSS classes are added by WordPress to the body tag.

Use inspect tool to see classes added by WordPress

You can use either category-tv or category-4 CSS class to style just this category page differently.

Let’s add a custom background image to a category archive page. You will need to add this custom CSS to your theme.

body.category-tv { 
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Don’t forget to replace background image URL and the category class with your own category.

You can also add custom backgrounds to individual posts and pages. WordPress adds a CSS class with the post or page ID in the body tag. You can use the same CSS code just replace .category-tv with the post specific CSS class.

We hope this article helped you learn how to add a background image in WordPress. You may also want to see our comparison of the best drag & drop page builder plugins for WordPress, and our tutorial on how to create a custom WordPress theme (without any code).

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

303 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

10 Comments

Leave a Reply
  1. J-P Zacaropoulos says:
    Aug 27, 2019 at 6:07 pm

    Hi. I am looking for a free theme where I can change the header plus have 5 or 6 menu items at the top. All the ones at which I have looked, one cannot change the theme. I am a beginner and trying to set up my website for my new business of copywriting. Thanks in advance
    Jean-Pierre

    Reply
    • WPBeginner Support says:
      Aug 28, 2019 at 9:24 am

      If you’re unable to find a specific theme design then you could take a look at page builder plugins such as the ones in our article here: https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/

      Reply
  2. Jon says:
    Jun 8, 2019 at 4:56 pm

    I tried to use your Additional CSS code with my own .jpg url. In fact, I’ve tried several from around the web and from my own uploaded files. The url is always in red-text, and there is never a preview. I have checked the code letter-by-letter, with command symbols, and everything else is normal-colored. The only coding I’ve done before is in Excel and Matlab, with a brief “Hello World” experience.
    What am I missing?

    Reply
    • WPBeginner Support says:
      Jun 10, 2019 at 12:57 pm

      That would normally mean that there is an error with how the url was added to the CSS. Is the url within double quotes?

      Reply
  3. Christine says:
    May 29, 2019 at 11:25 am

    I’ve chosen a theme (calm business) that has a custom background. But when I go to customize, I don’t have the option for a background image. What am I missing. My website is 3 years old and I’m now updating it. Is there something else that might need to be updated?

    Reply
    • WPBeginner Support says:
      May 30, 2019 at 10:03 am

      If it is not offering an option to edit your background, you would likely want to reach out to the theme’s support to ensure there isn’t another location the background image would be set at.

      Reply
  4. RANI ANDLEEB says:
    Mar 27, 2019 at 1:43 am

    how add image/Collor in body on local server WAMP.

    Reply
    • WPBeginner Support says:
      Mar 27, 2019 at 11:32 am

      It would be the same as a live site, if you do not have the option to edit the background then it may not be an option on the specific theme you’re using

      Reply
  5. ricardo says:
    Nov 5, 2017 at 11:14 am

    what about if im working on local server like xampp what file path should i put using css for the header im using hestia theme?

    Reply
  6. Rio Bermano says:
    May 22, 2017 at 11:59 pm

    Thanks wpbeginner

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
Elegant Themes
Elegant Themes Deal
Get the Divi theme with 194+ template packs from Elegant Themes for only $89. Extra, Bloom, and Monarch included free!
TeslaThemes
TeslaThemes Coupon
Get 20% off on TeslaThemes large collection of premium WordPress themes.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.