How to control web page background color with css

Speaking of 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 to do this, but to use CSS styles. Although it is a bit troublesome, the overall coordination is still very good.

Background color background-color

I don’t think I need to introduce this more. I think everyone knows the color code. Either use English instead or use represented by the specified code. The default value for this is transparent. Example:

body{background-color:yellow} 
H1{background-color:#000000}

(Recommended tutorial: CSS Getting Started Tutorial)

Background image background-image

Background image and background The settings of color in HTML are basically the same, and can be completed by adding relevant statements. But here, I am not referring to this method, the method I use is still 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')
}

When you use the background pictures in, you must often encounter some pictures that are too small, resulting in various repetitions of pictures that destroy the beauty of the entire page. You want to change to other pictures but It may be a troublesome situation such as inappropriateness. 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 be very good will help you, and it can also help you control the way pictures are repeated (repeat horizontally, repeat vertically, and repeat in both directions). To achieve repetition in these three directions, just follow bcackground-repeat. Add repeat-x (spread in the horizontal direction), repeat-y (spread in the vertical direction), repeat (spread in both directions).

Of course, it can control the duplication of pictures, or 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

A background picture is often not enough after the above settings, because when you use the above settings, it is not repeated After the display is set, the image will only be displayed in the upper left corner of the page and not elsewhere. However, if you want this background image to appear in the middle or elsewhere, then background-position can help you, because it uses To display a position relative to the upper left corner of the image (the default value is 0% 0%), it is set by two values, separated by a space.

Its main values ​​are left　centerright and topcenterbottom. 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 A horizontal value of 50px means that the image is moved horizontally by 50px units from the upper left corner area; what is particularly pointed out here is that 1. When you set the value, you only provide one value, which is equivalent to specifying only the horizontal position, and the vertical position is automatically set to 50%; 2When 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 a scroll bar, then your background image will not be positioned at that position forever. If you want the image to be positioned at that position forever, you can only make the image scroll with the content of the page. As for scrolling, background-attachment can help you at this time. You only need to add one of scroll (static) and fixed (scrolling).

Of course, I don’t let you add it randomly. After all, scroll is the default, which means that the picture 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 settings, I believe your background will be more beautiful, but too much code often has poor readability and is prone to errors, so here What I want to tell you is that you can use all the above codes together, that is to say, add the above related codes 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
}

Note: If you use code to insert it directly, you must put the following code inside and then between to display it normally!

Recommended related video tutorials: css video tutorial

The above is the detailed content of How to control web page background color with css. For more information, please follow other related articles on the PHP Chinese website!