Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
You have a website with a that meets most of your expectations, however you would like to give additional customizationsfor instance subtly highlight the backgroundit could be a solid color, or it could be an image.
You have evaluated and decided that it will be an image, used as a pattern, that is, it will be repeated to cover the entire background, and it would also look good only on some pages or site entries, now you wonder, how to implement this?
You could take two paths either use a plugin or use code.
Plugins to change background image in WordPress
This is the simplest alternative, currently most plugins that have the functionality to set a background image do so in the context of Gutenberg (which is currently the default WordPress editor), using a block to set a background image .
But we don’t want this, we need an image at the HTML body tag level and that can be used in certain entries and pages.
The plugin we will use will be
When you install and activate the plugin, you will see that on each page and post a new section will appear from where you can add a background image, as shown in the following image.
Once the image is added you have the option to preview it and also to delete it.
Ideally, you should use an image as a pattern as it will repeat by default and you have no option to change this from the plugin.
In this you can find some patterns that you could use.
Background image in WordPress via code
The other option to add the background image is use CSS code directly.
The first thing would be that you already have the background image that you are going to use uploaded to your WordPress, you simply have to have the absolute url of the image.
You can locate the url of the image from the WordPress media option when viewing the detail of an image you will see that you have the absolute path, as shown in the following image:
Once you have the url of the image you want to use, then you can build your CSS code, the base CSS code would be:
body{ background-image:url(xxxx); }
You would have to replace xxxx with the absolute url of the image
However, the previous code would apply to the entire site, so if you want some specific pages or entries you would have to help yourself with the classes that are generated in the HTML body tag, for example for a page with a certain ID it would be
body.page-id-XX{ background-image:url(xxxx); }
Where XX is the id of the page and xxxx is the absolute path of the image.
If you wish use a post instead of a page you would have to replace page-id with postid
In it you can see some of the most important CSS classes that are created at the body level.
To add CSS code you can review the article
conclusion
As you have seen, you can adjust the design of your site a bit by setting a background image for pages and posts and thus give certain parts of your website a different look. Furthermore you can do this either using a plugin or directly through code.
If you have any doubts, the following video details the previous points.
Help us improve our content by sharing your opinion
WordPress technical support at and regular speaker at Meetups and WordCamps in America.
Facebook Comments
Disqus