How To Fix The Background

Table of contents:

How To Fix The Background
How To Fix The Background

Video: How To Fix The Background

Video: How To Fix The Background
Video: Fix backgrounds in Photoshop 2024, May
Anonim

Sometimes the designer's intent requires the background image to remain stationary as the visitor scrolls through the page content. This can be done by changing the default background behavior setting using CSS (Cascading Style Sheets) instructions.

How to fix the background
How to fix the background

Instructions

Step 1

Add a styling description for the body block to your web document that contains a background-attachment property set to fixed, and the page background will remain stationary as the document scrolls. This method of fixing the background will work in all browsers that support any of the current CSS standards starting from version 1.0. In addition to the fixed value, the standards provide two more options for this property - scroll and inherit. If no value is specified for background-attachment in the document style descriptions, then it is assumed to be set to scroll by default. In this case, the background will move along with the scrolling of the page content. The inherit value indicates that the same value should be used for this element's background-attachment property as for its parent element.

Step 2

Add a style attribute to the tag for the page you want, and add a style description to fix the background. For example, it may look like this: You can also specify the address of the background image here:. Replace the address and name of the picture (img / pic.gif) with your own values. This method is convenient because it requires the least changes in the page code, but more often the description of styles is placed in a separate block in the head of the document or even in a separate file.

Step 3

If you want to use a separate CSS block with instructions for fixing the page background, then place before the source tag, for example, the following lines:

BODY {background: url (img / pic.gif) fixed;}

Don't forget to include the correct name and address of the background image instead of img / pic.gif.

Recommended: