The design of any site is based on background images and colors, like a house on a foundation. If you have a desire to replace the typical foundation of your Internet resource with something more individual, then you should start with the development of the design. And when it is ready, the purely technical part will remain, that is, replacing the old design of the site background specified in the source code of the pages with the new one. There are several ways to implement this in practice.
Instructions
Step 1
First, you need to find out which of the ways the background is set in the current version of the site. To do this, open the HTML code of the page. You can do this with a simple text editor by downloading the file from the server in advance. Or you can use the editor of the pages of the content management system, if you use one. The page editor does not require downloading the file, but modifies it directly on the server using the browser as an interface. The HTML code (HyperText Markup Language) of the page you open consists of instruction lines for the browser. They describe the types, appearance, and location of each of the elements of a web page. These instructions are commonly referred to as "tags". The order of the tags themselves in the page code also obeys the rules of the HTML language - they are divided into blocks, the first of which must be a heading block that starts with a tag and ends. It should be followed by the block that interests you more now - the body of the document. It is limited to tags and. In the opening tag of this block (), you can put information about the background of the page. Such information within tags is called "attributes". The attribute of the body tag that sets the background color is denoted as bgcolor and in the code it might look like this: Here we set the background color for the page to silver. The browser can recognize some of the colors by their names, but in order not to be mistaken, it is better to indicate their hexadecimal codes. This variant with silver color in hexadecimal expression will look like this: So, you need to find the tag starting with <body in the page code and check if the background color is set in it. If so, replace the color indication in it with your new version and save the changes to the page.
Step 2
The background in the current design of your site can be set not by color, but by a picture. The corresponding attribute of the body tag is called background, and it can look like this in the code: Here, the background is the bg.jpg
Step 3
When describing the appearance of pages with a relatively complex design, use "cascading style sheets" - CSS (Cascading Style Sheets). Blocks of CSS code can be included directly in the page code or contained in an external file with the "css" extension. You need to look for the style description tag starting with <style in the header part of the page code (between the and tags). If it contains a link to an external file, it will look something like this: @import "style.css"; Here is a link to a stylesheet named style.css. You need to open the specified file for editing. And if there is no link, and after the opening <style tag there are style instructions, then you need to edit them here. In both cases, among the descriptions of styles, you need to look for those related to the body of the document (body). This block of descriptions may look like this: body {
background-color: Silver;
color: Black;
} Here the value of the background-color parameter you need to replace with the value of your new color and better in the same hexadecimal values. The background image option in the CSS instructions should look like this: body {
background: # C0C0C0 url (img / bg.jpg) repeat-y;
color: Black;
} Here the link to the picture is similar to the one discussed above, and # C0C0C0 before the link means that the page space that is not occupied by the background image will have a silver background. "Repeat-y" indicates that the background picture should be multiplied along the Y (vertical) axis."Repeat-y" can be replaced with "repeat-x" (horizontal replication) or "no-repeat" (do not replicate). If you do not specify repeat at all, then the background image will be tiled to the background space of the page in all directions.
