CSS code to control the background color of the web page

I think everyone often worries about finding pictures that are suitable for their web page background. I think this is true, because these pictures are either too big, too small, or too messy. So is there any way to make the pictures suit your homepage taste? The answer is yes.

Want to know how to achieve it? Well, just follow me now, I promise you will learn it right away. However, I think friends who "start a business" on the Internet are generally divided into those who "open a business" in an Internet cafe (just like me, I started by pulling relevant codes from other people's homepages to modify), and those who make and upload them at home using professional software such as DW or FP. So, I plan to introduce it in two steps. First, I will consider the friends who "open a business" in an Internet cafe, and finally briefly introduce some background styles made with DW4.

In fact, everything is the same, just in a different way. Okay, enough of the small talk, let’s get down to business.

When it comes to background, there are only background color and color image. I think everyone must know that these two are to add bgcolor="#808080" and background="URL", right? But what I am going to introduce here is not to do it this way, but to use CSS style. 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 in detail. I think everyone knows the color code. It is either replaced by English or expressed by a designated code. The default value for this is transparent. example:

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

Background-image

The settings for background images and background colors 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 pictures. If you need to display pictures, just add the url (picture address) at the end. If you don’t want to display it, that’s the simplest thing. Just don’t need anything, because the default is none. 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 using background images, you must have often encountered various troublesome situations where some images are too small, resulting in various problems such as repeated appearance of images that destroy the beauty of the entire page, and other images are not suitable when replaced. But now, as long as you use the following CSS methods to control images, you will never have such troubles again.

Whether the image is displayed repeatedly 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 way the image is repeated (repeat horizontally, repeat vertically, and repeat in both directions). To achieve repetition in these three directions, just add repeat-x (horizontally), repeat-y (vertically), and repeat (in both directions) after background-repeat.

Of course, it can control the repetition of pictures, and it can also control the non-repetition of pictures. no-repeat is used to indicate that only one background image is displayed instead of repeating it. 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
}

Position the image display position background-position

A background image with the above settings is often not enough, because when you use the above non-repeat display settings, the image is only displayed in the upper left corner of the page, and not in other places. However, if you want this background image to appear in the middle or other places, 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 ​​​​separated by a space in the middle.

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% means the position is in the center, and a horizontal value of 50px means the image is horizontally moved 50px away from the upper left corner. It should be noted here that 1. If you only provide a value when setting the value, it is equivalent to specifying only the horizontal position, and the vertical position is automatically set to 50%; 2. If 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 always be positioned in that position. If you want the image to be positioned in that position forever, you can only let the image scroll with the scrolling of the page content. At this time, background-attachment can help you. You only need to add one of scroll (static) and fixed (scrolling).

Of course, you are not allowed to add them randomly. After all, scroll is the default, which means that the image will not scroll with the content of the page. example:

body
{
background-image:url('file&:///C:/WINDOWS/BACKGRND.GIF');
background-repeat:no-repeat;
background-attachment:fixed
}

Well, after the above settings, I believe your background will be more beautiful, but too much code is often difficult to read and easy to make people make mistakes, so what I want to tell you here is that you can add all the above codes together, that is, add the above related codes to the background.

When adding the code to the background, add spaces between each value to separate them, and do not put the background color code after the background image URL 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 the code directly, you must put it after the following code and then between them in order for it to be displayed normally!

Summarize

The above is the details of the CSS code that controls the background color of the web page. For more information about CSS web page background, please pay attention to other related articles on 123WORDPRESS.COM!