Do you want to Add a Background Images to your WordPress site
Adding background images in WordPress makes your WordPress site looks beautiful and pleasant. There are different ways you can add background images to your site, either with plugins, settings and editing your theme. So we will show you how to edit your WordPress site without stressing yourself too much.
There are different ways you can add background images as we have said and how you can set it up can be read below;
Add a Background Image in WordPress Using a Plugin
Using plugins is one of the easiest way of adding background images to a WordPress sites, we all know plugins are very flexible and works on all themes. You can also set different backgrounds for any post, page, category, or any other section of your WordPress site using plugins called Simple Full Screen Background Image.
Simple full screen background images will allow you to easily upload and set a full screen image as the background of your website. Images will be automatically scaled with the browser, so regardless of the browser size, the image will always fill the screen, even as the browser is resized live.
see our step by step guide on how to install a WordPress plugin.
Upon activation, you have to set up a group by going to Appearance -> Background Group. There you have to:
Add a group name, Select “Image” for Type, Choose your image, Select “Stretch” for Mode, Click the Publish button on the right.
After you published the background group, go to Appearance -> Background Options, select your group and press Save Changes.
You must Make sure the image has a high-quality resolution, otherwise it can get blurry also, you need to choose an image size that will look well on a wide variety of screen sizes. The most common aspect ratio nowadays is 16:9, so a recommended image size would be 1920×1080, so you can cover well most widescreen monitors and finally images can burden the loading time, so they need to be as optimized as possible.
Add Custom Background Images Using CSS Code
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 APPS, then WordPress will automatically add these CSS classes to the body tag when someone views the APPS category page.
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-apps {
background-image: url(“http://example.com/wp-content/uploads/2021/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 .apps-tv with the post specific CSS class.
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.
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.
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.
Click on the choose image button after uploading or selecting the image you want to use as background. you will see your selected image’s preview in the theme customizer.
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’
If you have any issue on this, you can use our comment session or join our delegate on Facebook to solve any issues related to WordPress and subscribe to our YouTube Channel for WordPress video tutorials.