The background of a web page can be tied to its content or behave independently of it. In the first case, when scrolling content in the browser window, the background image will also scroll, while in the second, it can remain stationary. To implement a fixed background of the page, you should use the CSS style description language - only it can guarantee the same background behavior in different types of browsers.
Instructions
Step 1
Use the background-attachment property in CSS to specify whether the page background should be fixed or movable. In total, this property can have three values - if you do not specify any of them, then by default it is assumed that background-attachment is set to scroll. With this value, the background image scrolls along with the page content. The inherit value copies the background behavior of the parent element, and the fixed value makes the background image independent of the content - it stays stationary when the page is scrolled. You should use it.
Step 2
Prepare your CSS instructions for use in the pages you want to fix the background. If you will not place the CSS code in an external style description file, then these instructions should be placed between the opening and closing style tags:
// there will be descriptions of styles
The description of the page background behavior must be bound to the BODY element - in CSS terminology it will be called a "selector" and will be written like this: BODY {
// descriptions of the page body will be here
} Properties related to this selector must be placed inside curly braces, separated by semicolons: BODY {
background-attachment: fixed;
background-image: url (images / BG.gif);
} The first line captures the background image, and the second indicates the address of the file containing the background image, relative to the page address. These two lines can be written in one complex CSS statement like this: background: url (images / BG.gif) fixed;
Step 3
Paste all the code for fixing the background into the text of the page. In its finished form, it may look like this:
BODY {background: url (images / BG.gif) fixed;}
Of course, you need to replace the location and name of the background image file. It is better to put the code before the tag, although this is not a prerequisite.
