The background is an image on which all the elements of the site are shown. Or it may not be a picture, but a solid or gradient color.
Most templates do not support setting and changing the background. However, not all themes are able to do this, especially when it comes to free copies. But even if you have a template installed on your site where you can change the WordPress background in the settings, this will be a very meager operation, since the changes will be applied to the entire site at once. It is not possible in regular templates to change the background of only some posts, categories or pages.
In this article we will tell you about two simple plugins that solve this problem in a couple of clicks.
Background Per Page
This is the simplest plugin that allows you to perform operations with the WordPress background. After installing and activating it, no settings or additional items in the site control panel will appear. Only on each post and page page there will be a new option that will allow you to add a custom background image.
Several effects can be applied to the picture selected for the WordPress background:
- Select repeat – horizontal or vertical;
- Make the picture scrollable with the site or fixed, the so-called;
- Select WordPress background orientation – right, left, center;
- Choose a regular color fill instead of images.
The plugin is free. Moreover, every downloaded WordPress background can be edited in the built-in editor of this add-on.
Full Screen Background Images Pro
This plugin is more complex to use and allows you to perform more operations with the WordPress background. It is paid and costs $13. After installing the activation of the plugin, there will be a menu item in the admin panel. It stores a gallery of backgrounds, where you can add, delete and edit images at any time.
In addition, you can set the WordPress background for any post or page, identifying them by ID, for home page, any category, archive pages, and even 404 pages.
The wide capabilities of this plugin are complemented by the function that was in the first one - on the adding page of each page and post, options are added for installing this or that background image, with an editor and all sorts of effects.
All in all, a great tool to make a WordPress background. Both paid and free plugins are suitable for solving many problems related to this.
Today in my practice I came across the fact that for the background of the menu it was necessary to set transparency. There was an option, of course, to do this using a picture.png, but I still decided to dig in and do it translucent background With using CSS . It turned out to be quite easy :)
In the html code we write a “class” for which it is necessary to set a certain transparency:
FON ( background: rgba(200, 54, 54, 0.5); )
Thus, I specified the background color by setting values for the three primary colors (red - r, green - g, blue - b), and background transparency to 50% (alpha - a) with one property. The values for color are in the range from 0 to 255, and for transparency the range is from 0.0 to 1.0
Property rgba also applies to all other elements. But if it becomes necessary to set transparency for all elements in a given class, then you can use the property opacity, which sets transparency for an entire element or entire page. then the code will look like this:
FON (opacity: 0.5; )
In this case, all elements in this class will become transparent, including pictures and text will be transparent.
Subscribe and receive useful articles by email!
Other cool articles on our blog
- I know that in practice there is often a situation where the site owner “remakes” or creates a site “from scratch” several times, and in the end does not get the desired result. In this case, you should...
- Affiliate Material! Thanks to constant focus search engines directly on the Internet user himself and indicators of the latest updates Google algorithms, it has become even more important for website owners to pay attention to their loading speed...
- Look, if you have the task of “developing a turnkey website,” follow this link and delegate the task to us. If you need an example terms of reference- see the article “Specifications for creating...
- Affiliate Material! - Do you want to publish your article? For many website owners, SEO optimization seems like a very difficult task. Actually this is not true. Attracting highly qualified specialists to promote can be very...
Recently I talked about solutions for - except using CSS and Javascript also cope with this task 2 WordPress plugin. Today I will consider one of them in more detail - this is Background Manager. Not every theme has settings for changing the background of the site, and not every user will be able to correct it through the styles in the template. In addition, the module has several additional interesting features, so it was decided to study it in more detail.
Update 11/8/2018: Unfortunately, the module has not been updated for a long time, and has now completely disappeared from the official Plugin Directory repository. Read the article or see the selection of plugins.
You can find the module on this page or install it by name from the WordPress admin panel. At the time of writing, he was considered quite old, because... the supported version ended at 3.7.8. Unfortunately, the plugin may not even be supported right now. However, I have successfully tested it on latest version systems 4.2.1. In addition, you won’t find 30 thousand downloads in every module.
The main task of the Background Manager plugin is to display a random background for each new visitor or create a slideshow from several images. Frankly, initially I thought that the module would simply help me make a clickable background, but its functions are somewhat more diverse. It allows:
- create sets of images from which pictures will be inserted as the background of the site. You can download them from local computer, WordPress media library or other modules;
- determine the positioning of the background, its “replication” (if it is a pattern);
- apply patterns to the background;
- see the image in its entirety after loading, rather than waiting for it to gradually appear from top to bottom (if you have a slow Internet connection);
- set background display to certain pages: main page, sections, archives or posts;
- add a link for the background with calculation of conversion statistics via Google Analytics.
As you can see, a very interesting set of options. This is speaking globally about the capabilities, but the Background Manager module is full of all sorts of details. So, for example, you can choose the transparency of the overlay pattern, determine the effect when transitioning between pictures in a slide show, etc.
Outside the module settings you will find in the section " Appearance" - "Background". Here, by the way, a situation arises that you may have two menu items with the same name at once. If you remember, then in some WordPress themes There is a similar setting. So, the Background Manager plugin is fully compatible with it and you can manage it in this section.
But it’s better to go to the “Background”, which represents only the module settings. On this page you will see just a lot of different settings.
However, the first step is to create a set of images for the background - click on the link " Add New Image Set". You can view the available sets in the “Image Sets” tab.
As I already said, there are a lot of settings here, there are:
- the principle of selecting pictures for the background - randomly, etc.;
- showing different pictures each time or remembering them in the browser session;
- background color;
- displaying the background on the entire screen or “replicating”;
- overlaying a pattern on top of an image;
- you can add a Pin It button from Pinterest and define a number of other options.
Finally, it should be noted that problems can sometimes arise with the display of the background. If you have a strict assignment or override of the background in the CSS of the template, then the Background Manager plugin may not work. For example, on one site I easily loaded an image and replaced the background property in the styles, but in this blog I had to comment it out specifically. It’s hard to say what this depends on. This is what ended up happening.
Overall, Background Manager is a cool plugin that allows you to display different images for the background of your website and even make a slideshow out of them. For some projects this can be a great "decorative" element.
Regarding links from the background in Background Manager. There is a similar option in the settings and you can specify a link for each picture. I tested this function and, it seems, everything was working at the time of writing. However, now there are problems with this. The only thing I could do was place the link in a special element - see the [+] icon in the screenshot above. This plugin feature works without problems.
blog on WordPress can be changed by the most different ways, and that these changes are actually made in codes PHP files located in the active design theme folder on the blog.Now look at your blog with a critical eye. Soon a lot of things will be different on it, because in principle, you can change whatever you want on yours. Of course, you just need to know how to do it.
In the administrative panel
Login to the administrative panel in Appearance - Editor . You already know what many of the templates are responsible for, but now you will be interested not in the templates, but in what is underneath them: Styles. More precisely, one section of them, which is called List of styles.
The file corresponding to this list is style.css. This file is located on the blog in the active theme folder. You can always find him there.
In the browser
Just open your browser. Most browsers have a nice feature: You can right-click on any area on the blog and select from a list of operations View element code . A window appears at the bottom in which you can find interesting information about the element you clicked on.
In this window left You will see the page code and a line will be highlighted in that code. corresponding to this element. A on right, in styles, there will be properties of this element.
Font size, indents, text and background color, alignment: it's all in the styles , and all this can be changed.
Changing the background color
On WordPress blog Personally, I don’t like it when the background of articles and the background of everything else are different. In this case, the articles in the feed appear in separate blocks and, in my opinion, do not look very good. We will make the background everywhere the same as the current background of the article. Right-click on the background that we want to change and select View element code. In the line that will be highlighted as a result on the right, we will be interested in class attribute name . Styles are prescribed specifically by class.
IN in this case class = art-layout-cell This means that in the styles, in the file style.css, there will also be such a class, and the properties will already be specified in it. It will just look different, namely:
.art-layout-cell, and then the properties of this class will be written in curly braces.
Find a class with this name in the file style.css. Let's use the search function Ctrl+F, and enter the name in the search box: art-layout-cell. We will immediately see the background:
background-color: Transparent. Transparent means transparent .
Now, what color do we need? Where can I get the background color of our articles? This time we will use FSCapture program. In it. among other things, among the set of tools you can find pipette, which determines the color of any area on your monitor screen. A very useful tool!
Open the FSCapture program, go to Settings, and select a tool Screen eyedropper
. Click on the desired area on the screen. In the window Hex You will see the code for the color you need: D2E8EE
You insert it into the style art-layout-cell instead of the word Transparent .
Look what happened. There is still a lot of work to be done, but a start has already been made.
Video about that. how to edit background on wordpress blog
More details You can get it in the “All Courses” and “Utilities” sections, which can be accessed through Top Menu site. In these sections, articles are grouped by topic into blocks containing the most detailed (as far as possible) information on various topics.
You can also subscribe to the blog and learn about all new articles.
It does not take a lot of time. Just click on the link below: