Skip to Main Content

Using different backgrounds WordPress

Divi: the easiest WordPress theme to use

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

WordPress is a tool that has various uses. It can both be used as a content management system and as a blogging platform (CMS).

This is definitely because this tool is easy to learn, use and customize. I mean, you can transform your website the way you want without putting in too much effort. You can even add different backgrounds to your WordPress posts and pages, and it's this last part that is the subject of this tutorial.

If you're looking to add some color and style to your WordPress posts and pages, this guide takes a look at the topic using a two-pronged approach. First, we are going to add different backgrounds to posts or pages using CSS and a simple PHP function.

However, if that's not your cup of tea (let's say you're the perfect beginner and the code is not your business), we will offer a plugin that will help you do it.

Either way, you won't have to waste a lot of time as it's a relatively easy project. Plus, it's always fun to learn something new.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

How to add a background with code on WordPress

This section will be of great use if you have knowledge of PHP, HTML and CSS. Don't worry, you can always copy and paste the snippets provided here. You just need to know where the different files are located on your WordPress installation.

Discover why video backgrounds are not always a good idea

Add different backgrounds with CSS on WordPress

Much of the style that goes into WordPress articles and pages (and your entire website) is controlled by a file called "Stylesheet ". The stylesheet file on WordPress is usually renamed "style.css". You can access " style.css By accessing " Appearance> Editor On your WordPress dashboard:

Editing wordpress themes

We will add a background (and other styles) your articles and WordPress pages in the style.css file, so it's important to have a second open tab where you can preview the various changes.

Discover also these Some text editors for developers WordPress

When navigating to " Appearance> Editor You will also see a list of all the WordPress theme templates on the right of the screen. If you are using a child theme, you will need to load the template files for your parent theme.

You need to focus on the file " header.php ». Why header.php ? Because this file is added to all other pages and posts. In other words, the code inside header.php appears on every page or post you create.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Locate this code snippet:

>

This function has a purpose. It offers CSS classes that you can use to change the style of your articles and pages. All you have to do is target a specific CSS class to the page or article you want to customize, add your background and style. All you have to do now is to save your changes.

Discover this that you can concretely do with the WordPress plugin Yellow Pencil?

Therefore "

Viewing the source code for any post or page is easy. If you're using Chrome, right-click on an empty space on a page and click " Inspect element ". On Mozilla, right-click directly on the article / page then click on " Source of the page ". If you are using Microsoft Edge (Internet Explorer), right-click your page / articles and select " View Source ».

Learn as well How to Effectively Use Tabs in Your Web Browser

If you look at the source code of a WordPress page, the generated code is almost the same:

If you looked at the source code for a single article, the body_class function will display something similar to:

As you can see, you'll have a CSS selector set that you can use to customize the background of your blog.

How to add a custom background with plugins

You can also customize the backgrounds of WordPress posts and pages as we showed earlier, using WordPress plugins. So if you don't have the time to fiddle with the code, or follow these instructions, here's a plugin that will help you get there.

Custom Backgrounds Premium WordPress

In a few minutes, with Custom Backgrounds You will be able to create rotating backgrounds for articles, pages, custom publication formats, taxonomies and archives among others. You will even have the possibility to customize the parallax effect, the timer and more.

Custom backgrounds for wordpress

You can even set clickable backgrounds for your WordPress posts and pages without too much configuration. The author also allows you to test the plugin before you buy it, so you can know what to expect.

Divi: The best WordPress theme of all time!

With over 701.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern look and optimize the grip of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. Zxeion 

Zxeion is a powerful WordPress plugin which enhances the security of your website. This plugin contains a collection of patches and tools for additional protection, as well as real-time protection for your network, that can help you identify threats to your website and block them without having to do anything. anything.Zxeion security firewall hide my wp plugin wordpress

Its features are among others: real-time protection, the ability to hide the admin section, automated firewall banning, file protection, IP blocker, protection against Brute Force attacks, detection of server errors, spam protection and many more

Download | DemoWeb hosting 

2. SearchAzon

The WordPress SearchAzon plugin allows you to integrate Amazon Search functionality into your website. This will give you the option of choosing to display Amazon search results to your website and redirect visitors to Amazon.

Searchazon woocommerce amazon affiliates auto search plugin

By using SearchAzon, you will earn commissions and your customers will be delighted. It's a very simple concept that will generate revenue from the automatic piloting of your website. Suppose you already have an online store that only offers a certain product niche, such as: Apple. A customer searches for "Samsung S8 +" what will happen is that you will lose that customer. This is where SearchAzon comes into action.

If a customer searches for a product that cannot be found on your website, based on that keyword / phrase, an automatic search will run on Amazon and your customer will get the best results from Amazon directly to your website. So, no more lost or disappointed customers. Everyone will find what they want on your website and you will generate additional income from Amazon.

Download | Demo | Web hosting

3. Master Slider

It's no wonder the WordPress Master Slider plugin is a perennial favorite on CodeCanyon. This tactile and responsive slider offers more than 70 templates that are highly customizable and also easy to use. 

Master slider touch layer slider wordpress plugin

You will have the option to insert or embed HTML text, links, images or videos directly into each slide, then independently animate each layer. With over 70 configuration options, Master Slider remains one of the highly customizable plugins in this niche.

Its features are: a visual slideshow builder, ease of use, the presence of navigation keys, the ability to load and view galleries from services such as Flickr and WooCommerce, and many more

Download | Demo | Web hosting

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here ! That's it for this tutorial, I hope it will allow you to change the backgrounds easily on WordPress. If you liked this article then feel free to Share with your friends.

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

... 

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
11 shares
Share5
tweet1
Save5