Home » Customize WordPress » How to Set a Background Image with WordPress

How to Set a Background Image with WordPress

Rate this post

How to Set a Background Image with WordPress

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 screenshotCSS 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.

WP Site Partner logoWP Site Partner logo

Too busy for WordPress? We can add a background image for you.

WP Site Partner is our new maintenance and customization service for busy WordPress users.

Learn More

Add a background image

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

CSS Hero DashboardCSS 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 SettingsCSS 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 SettingsCSS 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 ImageCSS 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 SettingsCSS 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 SibleyBen Sibley
Ben Sibley
Ben Sibley is a WordPress theme designer & developer, and founder of Compete Themes.

Check Also

How to Create a Form with Printable PDF Entries in WordPress

How to Create a Form with Printable PDF Entries in WordPress