Transparent background or text using CSS. Edit Background on Wordpress Blog Wordpress Template with Transparent Background

blog on WordPress. You can change the most different waysand that these changes are actually produced in PHP files located in the active design team folder On the blog.

Look now to your blog with a critical look. Soon there will be a lot on it differently, because in principle, you can change everything that you want. Of course, you just need to know how to do it.

In the administrative panel

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

Complies with this list file style.css. . This file is on the blog in the active theme folder. You can always find it there.

In browser

Just open your own in the browser. Most browsers have a good feature: you can click on any area on the blog right key, and select from the list of operations View code code . At the bottom appears a window in which you can find interesting information About the element to which you have pressed.

In this window left You will see the page code, and a string will be highlighted in this code. Relevant this element. BUT on right, in styles, there will be the properties of this element.

Font size, indents, text color and background, alignment: all this is in the styles And all this can be changed.

Change the color of the background

On the blog WordPress. I personally do not like it when the background of articles and the background of all the rest is different. In this case, the articles in the tape are in separate blocks and, in my opinion, do not look very well. We will make the background everywhere the same as the article is now. Click on the background that we want to change the right mouse button, select the view of the element code. We are in the row that will be highlighted from the right will be interested title Class Attribute . Styles are prescribed according to classes.

In this case class \u003d ART-LAYOUT-CELL This means that in the styles in the file style.css., there will also be such a class, and properties will already be spelled out. Only look like this will be different, namely:

.art-Layout-CellAnd then in curly brackets will be spelled out the properties of this class.

Find a class with such a name in the file style.css.. We use the search function Ctrl + F.and propose in the search box name: aRT-LAYOUT-CELL. We will immediately see the background:

background-Color: Transparent. Transparent means transparent .

And now, what is the same, we need a color? Where to get the color of the background 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 defines the color of any plot on the screen of your monitor. Very useful tool!

Open the FSCAPTURE program, come in Settings and choose the tool Screen Pipette . Press the desired area on the screen. In the window Hex. You will see the code you need: D2E8EE.

You insert it in style aRT-LAYOUT-CELL Instead of the word Transparent .

See what happened. There is still a lot of work, but the beginning has already been laid.

Video about that. How to Edit Blog Background WordPress

You can get more detailed information in the "All Courses" and "utility" sections in which you can go through the top menu of the site. In these sections, the article grouped on topics in blocks containing the most deployed (as far as possible) information on various topics.

You can also subscribe to a blog, and learn about all new articles.
It does not take much time. Just click the link below:

Recently talked about decisions for - In addition to using CSS and JavaScript with this task, 2 more Wordpress plugin. One of them I will consider today in more detail - it is Background Manager. Not every topic has settings to change the background of the site and not every user can adjust it through styles in the template. In addition, the module has several additional interesting features, Therefore, it was decided to study it in more detail.

Update 8.11.2018: Unfortunately, the module has not been updated for a long time, and now it disappeared from the official repository of Plugin Directory. Read the article or see the selection of plugins.

You can find the module on this page or set it by name from the WordPress admin. At the time of writing the article, he was considered to be quite old enough, because The supported version ended in 1.7.8. Unfortunately, the plugin may even be supported now. However, I successfully tested it on latest version Systems 4.2.1. In addition, 30 thousand downloads will not meet in each module.

The main task of the Background Manager plug-in is the display of a random background for each new visitor or creating a slideshow from several images. To confess, initially I thought that the module would simply help me make a clicable background, but its functions are somewhat more diverse. It allows:

create image sets from which pictures will be inserted as the background of the site. You can download them from local computer, media library WordPress or other modules;
determine the positioning of the background, its "replication" (if it is a pattern);
impose patterns on the background;
see the image completely after loading, and not wait until it gradually appears from top to bottom (if you have a slow Internet);
configure the background display on specific pages: main, sections, archives or posts;
add a link for the background with counting the statistics of transitions through Google Analytics.

As you can see a very interesting set of options. This is how to speak globally about the possibilities, but in the Background Manager module full of all sorts of details. For example, you can select the selection of the transparency of the imposed pattern, determine the effect when moving between pictures in slidesoshou, etc.

Outside the module setting will find in the "Appearance" section - "background". Here, by the way, there is such a situation that you may have two menu items with such a name. If you remember, then in some themes WordPress. There is a similar setting. So the Plugin Background Manager is fully compatible with it and you can manage it in this section.

But it is better to go to the "background" that represents only the module settings. On this page you will just see a lot of different settings.

However, the first thing 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, settings here are very and very much, there is:

the principle of sampling pictures for the background - by chance, etc.;
showing different pictures every time or memorizing them in the browser session;
background color;
display background for full screen or "replication";
plipping pattern over image;
you can add the PIN IT button from Pinterest and define a number of other options.

Finally, it should be noted that with the display of the background, sometimes problems may arise. If you have a strict task or redefinition of the background in the CSS template, then the plagne Background Manager may not work. I, for example, on one site quietly loaded the picture and replaced the property background property in styles, and in this blog I had to specifically comment. What it depends is difficult to say. That's what happened in the end.

In general, Background Manager is a cool plugin that allows you to display different pictures for the background of your site and even make a slideshow. For some projects, this can be an excellent "decorative" element.

As for references from the background in Background Manager. In the settings there is a similar option and you can specify a link for each picture. I tested this feature and, it seems, everything worked at the time of writing the article. However, now there have been problems with this. The only thing that happened is to place a link in a special element - see the [+] icon in the screenshot above. This chip plugin works without problems.

The background is an image on which all elements of the site are shown. Either it may not be a picture, but a solid or gradient color ,.

Most templates do not support the setting and change of the background. However, not all topics are able to do this, especially if we are talking about free copies. But even if you have this template on your site, on which you can change the WordPress background in the settings, it will be a very scant operation, since changes will take place immediately on the whole site. There is no possibility in conventional templates to change the background only in some records, columns or pages.

In this article, we will tell you about two simple plugins that solve this problem for a couple of clicks.

Background Page

This is the easiest plugin that allows you to carry out operations with WordPress background. After installing and activating, no settings will appear and the optional items of the management panel will not appear. Only on the page of each record and page will be a new option that will add an individual background picture.

To the picture selected for the WordPress background, you can apply multiple effects:

Select a repeat - horizontal or vertical;
Make a picture scrolling with the site or fixed, the so-called;
Select the WordPress background orientation - on the right, left, in the center;
Select Instead of images, the usual color fill.

Plugin free. In addition, each downloaded WordPress background can be edited in the embedded editor of this supplement.

Full Screen Background Images Pro

And this plugin is more complicated in the work, allows you to carry out more operations with WordPress background. It is paid and costs $ 13. After setting the activation of the plugin in the admin panel there will be its menu item. It stores the gallery backgrounds, you can add, delete and edit images at any time.

In addition, you can install WordPress background for any record or page, defining them by ID ID, for main page, any rubric, archival pages and even pages 404.

The wide possibilities of this plug-in are complemented by the function that was in the first - options for installing one page or another. background image, with editor and all sorts of effects.

In general, a great tool to make a WordPress background. Both paid, and free plugin is suitable for solving many tasks, with this related.

Today in his practice faced the fact that for the menu background it was necessary to put transparency. There was an option of course to do it with the help clip .Png, but still decided to swell and make translucent background S. using CSS. . It turned out to be quite simple :)

In HTML code we register the "class" for which it is necessary to establish a certain transparency:

FON (Background: RGBA (200, 54, 54, 0.5);)

thus, I pointed out the background color, exhibiting values \u200b\u200bfor three main colors (red - r., green - g., blue - b.), and the transparency of the background by 50% (Alpha - a.) One property. The values \u200b\u200bfor the color are indicated in the range from 0 to 255, and for transparency, the range will be from 0.0 to 1.0

Property rGBA Applicable also for all other elements. But if it becomes necessary to establish transparency for all elements in this class, you can use the property. opacitythat establishes transparency for the whole element or the entire page. Then the code will look like this:

FON (OPACITY: 0.5;)

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

Subscribe and get useful articles on the mail!