home » the Internet » Editing the background on the WordPress blog. Transparent background or text with CSS Wordpress how to make a page background transparent

Editing the background on the WordPress blog. Transparent background or text with CSS Wordpress how to make a page background transparent

The background is an image that shows all the elements of the site. Or it may not be a picture, but a solid or gradient color,.

Most templates do not support setting and changing backgrounds. However, not all themes are capable of doing this, especially when it comes to free copies. But even if you have such a template installed on your site, on which 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 to change the background in ordinary templates only for 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 manipulate your WordPress background. After installing and activating it, no settings and additional items of the site control panel will appear. Only on the page of each post and page there will be a new option that will allow you to add an individual background image.

Several effects can be applied to the picture selected for the WordPress background:

Select repeat - horizontal or vertical;
Make a picture scrollable with the site or fixed, the so-called;
Select the WordPress background orientation - right, left, center;
Choose a regular fill color instead of images.

The plugin is free. In addition, every uploaded WordPress background can be edited in the built-in editor of this add-on.

Full Screen Background Images Pro

And this plugin is more difficult to work with, it allows you to do more work with the WordPress background. It is paid and costs $ 13. After installing the plugin activation, its menu item will appear in the admin panel. It contains a gallery of backgrounds, here you can add, delete and edit images at any time.

In addition, you can set a WordPress background for any post or page, identifying them by ID, for the main page, any category, archive pages, and even a 404 page.

The wide capabilities of this plugin are complemented by the function that was in the first one - on the page for adding each page and post, options are added for setting a particular 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 many tasks related to this.

Recently I talked about solutions for - in addition to using CSS and Javascript, 2 WordPress plugins also cope with this task. One of them I will consider in more detail today is the Background Manager. Not every theme has settings for changing the background of the site and not every user will be able to customize it through the styles in the template. In addition, the module has several additional interesting functions, 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 now it has 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 area. At the time of this writing, it was already considered quite old, because the supported version ended with 3.7.8. Unfortunately, the plugin may not even be supported right now. However, I have tested it successfully on the latest system version 4.2.1. In addition, 30 thousand downloads are not found 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 just help me make a clickable background, but its functions are somewhat more diverse. It allows you to:

create sets of images from which images will be inserted as the background of the site. You can download them from your local machine, WordPress media library, or other modules;
determine the positioning of the background, its "replication" (if it is a pattern);
overlay patterns on the background;
see the entire image after downloading, and not wait until it gradually appears from top to bottom (if you use slow Internet);
set up the display of the background on certain pages: main, sections, archives or posts;
add a link for the background with the calculation of conversion statistics through Google Analytics.

As you can see, a very interesting set of options. This is globally about the possibilities, but the Background Manager module is full of all sorts of details. So, for example, you can choose the transparency of the superimposed pattern, determine the effect when switching between pictures in a slideshow, etc.

Outside of the module settings, you will find in the "Appearance" - "Background" section. Here, by the way, a situation arises that you may have two menu items with the same name at once. If you remember, some WordPress themes have this 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 bunch 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 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 storing them in a browser session;
background color;
displaying the background on the whole screen or "replication";
overlaying a pattern over an image;
you can add a Pin It button from Pinterest and define a number of other options.

Finally, it should be noted that sometimes problems can arise with displaying the background. If you have a strict setting or redefinition of the background in your CSS template, the Background Manager plugin may not work. For example, on one site I quietly loaded an image and replaced the background property in the styles, but in this blog I had to comment it out specially. What it depends on is hard to say. Here's what happened in the end.

Overall, Background Manager is a cool plugin that allows you to display different images for your website's background and even make a slideshow out of them. For some projects this can be a great "decorative" element.

As for the links from the background in the Background Manager. There is a similar option in the settings and you can specify a link for each picture. I tested this function and everything seemed to work at the time of this writing. However, now there are problems with this. The only thing that we managed to do was to place the link in a special element - see the [+] icon in the screenshot above. This plugin feature works without problems.

wordPress blog can be changed in many different ways, and that these changes are actually being made in PHP file codes located in active design theme folder on the blog.

Now take a critical look at your blog. Soon a lot will be different on it, because in principle, you can change whatever you want on your own. Of course, you just need to know how to do it.

In the admin panel

Go to the admin panel at Appearance - Editor ... You already know what many of the templates are responsible for, but now you will not be interested in templates, but in what is under them: Styles... More precisely, one section of them, which is called Style List.

The file matches this list 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 yours in your browser. Most browsers have a nice feature: you can right click on any area on the blog and select from the list of operations View item code ... A window appears at the bottom where you can find interesting information about the item you clicked on.

In this window left You will see the page code and a line will be highlighted in that code. corresponding to the given element. AND on right, in styles, there will be properties of this element.

Font size, indents, text and background colors, alignment: it's all in styles and all this can be changed.

Change the background color

On a WordPress blog, I personally don't like it when the background of the articles and the background of everything else are different. In this case, the articles in the feed are in separate blocks and, in my opinion, do not look very good. We will make the background everywhere the same as the background of the article. Click on the background that we want to change, with the right mouse button, select View element code. We will be interested in the line that will be highlighted as a result on the right class attribute name ... Styles are written by class.

In this case class \u003d art-layout-cell This means that in styles, in the file style.css, there will also be such a class, and properties will already be written in it. Only it will 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 write 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... In it. among other things, among the toolbox you can find pipette which defines the color of any area on your monitor screen. A very useful tool!

Open the FSCapture program, go to Settings , and choose the tool Screen pipette ... Click on the desired area on the screen. In the window Hex You will see the code of the color you need: D2E8EE

You insert it into the style art-layout-cell instead of a word Transparent .

See what happened. There is still a lot of work to be done, but a start has already been made.

Video about. how to edit background on a WordPress blog

More detailed information can be found in the sections "All courses" and "Usefulness", which can be accessed through the top menu of the site. In these sections, the 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 much time. Just click the link below:

Today in my practice I came across the fact that for the background of the menu it was necessary to put transparency... There was an option, of course, to do it using a picture.png, but still decided to dig in and do semi-transparent background with CSS... It turned out to be quite simple :)

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 \u200b\u200bfor the three primary colors (red - r, green - g, blue - b), and a background transparency of 50% (alpha - a) by one property. The values \u200b\u200bfor color are specified in the range from 0 to 255, and for transparency, the range will be from 0.0 to 1.0

Property rgba also applicable for all other elements. But if it becomes necessary to set transparency for all elements in this class, then you can use the property opacity, which sets transparency for the whole element or the entire page. then the code will look like this:

FON (opacity: 0.5;)

In this case, all elements in this class, including pictures and text will be transparent.

Subscribe and receive useful articles by mail!