How to Set a Background Image with WordPress

Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.

Want to add a beautiful background image to your site?

Why is that so hard?

The reason it’s hard to find a quick solution online is that there isn’t a one-size-fits-all trick to add a background image. It depends on the theme you’re using.

Since I don’t know what theme you’re using, I can’t give you a CSS snippet to copy & paste. It might work, or it might not ?

However, there is a plugin you can use that will make it pretty easy.

How to add a background image with CSS Hero

For visual customizations like this, you can’t beat the CSS Hero plugin.

CSS Hero homepage screenshot
Visit the CSS Hero site

While your theme may come with a limited number of customization options, CSS Hero can be used to make virtually any customization you can imagine.

Here’s how you can use it to add a background image.

Add a background image

You’ll get a new interface on your site just like this for editing your site’s appearance.

CSS Hero Dashboard

You can click on any element in the site preview to view the available customization options. For instance, if I click on the background element, I’ll see these tools available.

CSS Hero Settings

As you can see, the first option is to modify the background. Clicking this option reveals the background image settings.

CSS Hero Background Settings

Clicking the Image button reveals the various image options.

While you can upload a new image or select an existing image from your media library, CSS Hero also has an integration with Unsplash which lets you quickly add any image from their amazing (and free) stock photo collection.

CSS Hero Background Image

Once you select and add a background image, it will automatically show up in the preview.

For the best results, you’ll want to use the following positioning settings so the background image stays in place while you scroll and fills the whole screen without stretching.

CSS Hero Background Size Settings

And with that, you now have a beautiful background image present on every page of your site.

Only you can see the changes being made in the preview, but once you click the Save & Publish button your changes will go live for all visitors to see.


With the right tools, it’s very easy to add a background image to your site. Not only that, you can also get a ton of control over how the image is displayed and gain access to thousands of gorgeous free images.

Check out our complete CSS Hero tutorial if you want to see all the ways you can use CSS Hero to customize your site.

Otherwise, click here to visit the CSS Hero website. And you might like these themes for adding video backgrounds to your site.

Lastly, if you want more cool ways to customize your site, take a look at our WordPress customization guide.

Ben Sibley
Ben Sibley
This article was written by Ben Sibley. He is a WordPress theme designer & developer, and founder of Compete Themes.