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.
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.
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.
As you can see, the first option is to modify the background. Clicking this option reveals the background image 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.
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.
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.
Conclusion
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.
