Use CSS to control web page background

I think everyone often worries about some pictures that are more suitable for their web page background. I think this is also true, because these pictures are either too big, too small, or too messy. So is there any way to make the pictures suit you? What's your appetite for homepage? The answer is yes. If you want to know how to implement it, okay, everyone, start following me now, and I guarantee that you will learn it in no time. However, my friends who want to "start a family" online are generally divided into "opening" in an Internet cafe (just like me, I just pulled the relevant code from other people's homepages to change), and those who use DW or DW at home. Professional software such as FP can be used to make and upload them, so I plan to introduce them in two steps. First, for the sake of friends who "open" in Internet cafes, and finally, I will briefly introduce some background styles made with DW4. In fact, it has to be said that everything is the same, just in different ways. Okay, enough gossip, let’s get down to business now.

When it comes to background, there are only background colors and color pictures. I think everyone must know to add bgcolor="#808080" and background="URL" to these two, right, but what I am going to introduce here is not how to do this. , but it is done using CSS styles. Although it is a bit troublesome, the overall coordination is still very good.

·Background-color

I think I don’t need to introduce this more. I think everyone knows the color code. It is either replaced by English or specified by the code. The default value for this is transparent.
Example: body{background-color:yellow}
H1{background-color:#000000}

·Background image background-image

The settings of background image and background color in HTML are basically the same and can be set in Add relevant statements to complete. But here, I am not referring to this method, the method I use is CSS. The main function of background-image is to display images. If you need to display images, just add the url (the address of the image) at the end. If you don't display it, that is the simplest thing. Just don’t, because the default is none, and if you want to add it, just add none at the end.
Example: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF')}
h1{background-image:url('none')}

The background you are using When using pictures, you must often encounter troublesome situations such as some pictures being too small, such as the repeated appearance of pictures destroying the beauty of the entire page, and other pictures that are inappropriate if you want to replace them. But now, as long as you use the following methods to control images in CSS, you will no longer have such troubles in the future.

·Whether the picture is repeatedly displayed background-repeat

Sometimes repeated display is necessary, but sometimes repeated display is a headache. Now this can help you very well, and it can also help you control the picture. Repeating methods (repeat horizontally, repeat vertically, and repeat in both directions), and to achieve repetition in these three directions, just add repeat-x (spread horizontally), repeat after bcackground-repeat -y (spread in vertical direction), repeat (spread in two directions). Of course, it can control the duplication of pictures, and it can also control the non-duplication of pictures. no-repeat is used to indicate that only one background image is displayed instead of repeated. This is not the default. The default is to display the background image repeatedly (repeat).
Example: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat}

·Positioning picture display position background-position

　The background image is often not enough after the above settings, because when you use the above non-repeat display setting, the image is only displayed in the upper left corner of the page and not elsewhere. However, if you want this to appear in the middle or other places If you have a background image, then background-position can help you, because it is used to display the position of the image relative to the upper left corner (the default value is 0% 0%), and is set by two values. Separate them with spaces. Its main values ​​are left|center|right and top|center|bottom. You can also use a percentage value to specify a relative position or a value to specify an absolute position. For example, 50% indicates that the position is in the center, and 50px The horizontal value means that the image moves horizontally by 50px units from the upper left corner area; what should be pointed out here is that 1. When you set the value, only provide one value, which is equivalent to specifying only the horizontal position, and the vertical position is automatically set to 50%; 2. When the value you set is a negative number, it means that the background image exceeds the boundary.
Example: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-position:100px 10px}

·Control whether the image scrolls background-attachment

　The above two steps can help you complete the positioning of the image, but it is not perfect after doing so, because if your page has scroll bars, then your background image will not be positioned at that position forever. If you want the picture to be positioned at that position forever, you can only make the picture scroll as the content of the page scrolls. At this time, background-attachment can help you. You only need to add scroll (still) and fixed (scroll). One of these will do. Of course, you are not allowed to add them randomly. After all, scroll is the default, which means that the image is not allowed to scroll with the content of the page.
Example: body{background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');background-repeat:no-repeat;background-attachment:fixed}

Okay, after the above After setting up, I believe your background will be more beautiful, but too much code often has poor readability and is prone to errors, so what I want to tell you here is that you can add all the above codes together. Use, that is to say, add the above related code to the background. When adding the code to the background, add a space between each value to separate it, and do not put the background color code behind the URL of the background image to avoid the image not being displayed.
Example: body{background:green url('file&:///C:/WINDOWS/BACKGRND.GIF') fixed 100px 50px no-repeat}

　Finally, I would like to remind everyone that if you insert it directly with code, you must Put the following code inside and then between to display it normally!

The above is about using CSS to control the background of web pages. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!