Use CSS to control the webpage background position

I. CSS positioning the image display position background-Position

It is often not enough for a background image to pass through the above settings, because when you use the above non-repeated display settings, the image is only displayed in the upper left corner of the page, rather than in other places, however, if you want to see this background image in the middle or other places, the background-position will help you, it is used to display the position of the image relative to the upper left corner (that is, the default value is 0%). It is set by two values, separated by spaces. Its main values include left | center | right and top | center | bottom. You can also use the percentage value to specify the relative position or use a value to specify the absolute position, for example, 50% indicates that the position is in the center, while the horizontal value of 50px indicates that the image is horizontally moved to 50px units from the area in the upper left corner, 1. When you set a value, only one value is provided, which is equivalent to specifying only the horizontal position. The vertical value is automatically set to 50%. 2. When you set a negative value, the background image exceeds the boundary.
Example: body {background-image: URL (file &: // C:/Windows/backgrnd. GIF); background-repeat: No-Repeat; Background-position: 100px 10px}

Ii. CSS controls whether to scroll background-Attachment

The above two steps can help you locate the image, but it will not be perfect after this is done, because if your page has a scroll bar, then, the background image will not always be located at that position. If you want the image to always be located at that position, you can only scroll the image with the page content, at this time, the background-attachment will help you. You only need to add one of the scroll (static) and fixed (rolling) options. Of course it doesn't make you mess up. After all, scroll is the default, that is, it won't let the image scroll with the page content.
Example: body {background-image: URL (file &: // C:/Windows/backgrnd. GIF); background-repeat: No-Repeat; Background-Attachment: Fixed}

Well, after the above settings, I believe that your background will be more beautiful, but too much code is often poorly readable and prone to errors, so here I want to tell you that all the above Code can be used together, that is, to add the above Code to the background. When adding codes to the background, separate them with spaces in the middle of each value, and do not place the background color code behind the URL of the background image, so that the image cannot be displayed.
Example: body {Background: Green URL (file &: // C:/Windows/backgrnd. GIF) fixed 100px 50px no-repeat}

Finally, I would like to remind you that if you use code to directly insert it, you must put it in the code before it can be displayed normally!

Next, I will introduce how to use DW to create the above style, because I have already listed the items in detail in DW, and I have also explained the specific functions, so let's give a brief introduction as long as you can understand it.
1. Before that, you should open the CSS styles window. If not, press SHIFT + F11 or select this option from the window drop-down menu.
2. Right-click to select new style... or click the icon with a + sign below.
3. in the pop-up window, select the following: select the body for the tag because the CSS style we introduced above is about the body, and here I will only introduce the background in it, for others, do not introduce the content. Select the second type in the following section, and select the second type in define. In this way, you can find one between the files, the content here is actually described above. Ah ~ _ ^
4. Click OK and the pop-up window is the most important. As I have said before, this time we will mainly introduce the background option, so select it in the window next to it. After the selection, the window on the right will become a configuration item related to it. For details, I have introduced it above. You only need to refer to the above introduction. However, the bottom two items in this window are actually the horizontal and vertical directions in the background-position.
5. Click OK. After that, you can find the code on the page (the Code option under the view.