How To Create An Image Background In WordPress

Adding an image to your WordPress background not only makes it much more engaging but also pleasing to the users and will enhance their experience.

You can create a WordPress background image with a few simple steps. In this tutorial, we are going to look at two methods of adding an image to WordPress background.

How To Create An Image Background With WordPress Theme

You can easily create an image background on WordPress if your theme allows you to create a custom background while most of the WordPress themes do support custom backgrounds.

If your theme supports custom background, you can follow these simple steps to create an image background on WordPress.

Create Amazing Websites

With the best free page builder Elementor

Start Now

Head over to the Appearance panel and then Customize page on your WordPress. From there, you will be able to change theme settings for a custom background by going to the Background Image.

Then, you need to select the background image option where it will show you option to add your image for the background.

Next, you can upload the picture for the background or select one from your WordPress media library.

After that, a demo can be seen in the theme customizer. Right below that you will see a Preset panel and from there you can select Fill Screen, Fit Screen, Repeat or Custom for your background image.

Finally, you have to Save and Continue to store the settings on your WordPress and your background will be updated successfully.

However, if your WordPress them does not support custom background, we have another method for you.

How To Create An Image Background With CSS Code In WordPress

Using this method, you can create a custom background anywhere in WordPress. Some CSS classes are already added to several HTML elements in your WordPress by default which allows you to put custom backgrounds on different posts, categories and pages.

For a TV category, a CSS class looks like this:

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

In order to make a custom background image to a category archive page, below given custom CSS needs to be added 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;
}

However, you have to make sure that you replace the category class with your own category and the image URL with your background image.

Using the above CSS code, you can add custom backgrounds to your individual posts or pages. You just have to replace .category-tv with the post or page specific CSS class.

Thank you! That's all for this tutorial. We wish you Good Luck for going towards a more pleasing and engaging website.

To stay updated about our further publications, make sure to follow us on Facebook and Twitter.