Better webpage background Design

The background design in the webpage is very important, especially for the personal homepage, the background of a homepage is equivalent to the wall floor in a room, A good background not only affects the visitor's acceptance of the webpage content, but also the visitor's impression of the entire website. If you pay attention to other websites, you may find that different backgrounds are available on different websites, even on different pages of the same website. What are the backgrounds of different styles and how they are designed? Now I will give you a complete summary.
1. Color background

The color background design is the simplest, but also the most common and important, because it has an unparalleled display speed advantage over the image background. In a webpage file, tags are usually used to specify the color background of the page. The HTML syntax is as follows:

　　

The "color" indicates different colors, which can be expressed in different colors. Commonly Used English names that use colors, such as blue, yellow, and black, you can also use hexadecimal notation of colors, such as # 0000ff, # FFFF00, and #000000. In addition, you can also use the percentage value method and integer method to achieve the same effect.

Although the color background is relatively simple, you need to pay attention to it in many places. For example, you need to design the warm and cold status of the background color based on different page content, it is necessary to design the background color and the optimal Visual matching of the page content based on the page arrangement.

2. Sand background

A sand background is actually within the scope of an image background. Its main feature is that the background of the entire page can be seen as a reshuffling of a local background. In this type of background, a sand background is common, therefore, we collectively refer to it as a sand background.

Beginners of Home Page makers have such experiences. When they try to use their photos as the background of the page, they find that not only a picture is displayed on the browser, the picture is arranged horizontally and vertically. This is the regular method used by the browser to process the image background. With this rule, we can use a small image as the page background so that it can be automatically arranged on the page to overlay the entire page, this greatly reduces the size of webpages.

I am afraid that the readers have already understood the principles and implementation methods of the sand background, that is, to find a small image, the smaller the image, the better, but be sure to make the final background look like a whole, instead of creating images. The HTML syntax is as follows:

　　

"Picture" indicates the URL path of the background image.

3. stripe background

The stripe background is similar to the sand background. It applies to the horizontal or vertical arrangement of the page background, while the other side is irregular. It also uses the browser to automatically repeat the image background. Unlike the sand background, it only allows the image to repeat in one direction.

Take the vertical arrangement as an example. First, use the image processing software to create a horizontal bar image with a blue-white gradient from left to right. Its length is equal to the width of the page. Also passed
　　

Set it as the page background. After displayed in the browser, it becomes the color background of the entire page from left to right. Of course, you can also use a similar method to achieve the horizontal arrangement of bar backgrounds.

4. Photo background

Taking photos of yourself or friends as the background of the page is a bit exciting, but the browser's Automatic Arrangement of pictures makes it hard to achieve this desire. What should we do? There is nothing unexpected, but we can't do it. Here we use a little simple CSS. In a webpage file ...... Add the following CSS statement between them:

　　

In this way, you can see that your photo is in the middle of the page, and when pulling the browser window's scroll bar, the photo is still in the middle of the page and does not scroll along with the page content. If you feel that the photo is not satisfactory in the middle of the page, you can adjust its position on the page at will. You only need to adjust the value of "background-position.

5. Compound background

If you accidentally set the color background in the tag during the "Photo background" exercise, what do you see? Does the color background work? Yes, you can see that your photo floated above your color background, and both of them can be displayed normally at the same time. This is the charm of the compound background. What's more attractive is that when the image background you set cannot be normally displayed due to unknown factors, the browser can automatically replace it with the color background you set. I don't need to talk about the design!

6. Local background

The background we mentioned above is the background of the entire page. Can you set your own background for a part of the content on the page? The answer is yes.
Most commonly, in table design, we can set a background for a table that is different from the page, or even in different table cells, you can also set the background of each table unit. See the following table example:
The Display Effect in the browser shows that not only does the table have a different background from the page, but each cell can also have different backgrounds.
In addition, we can also set a background for a text section, or even set a background for a text section, which also requires some CSS. First, let's take a look at the following example:
　　
I remember Chairman Mao's poem :"
When the day goes 80 thousand miles, you can view the one thousand River.
"Great people are amazing ,...... Just a few miles away.

The Display Effect in the browser is a little excited now. Ah, the original text section can also have its own background. As long as you want, you can define your own background for any part of the page to make the page more beautiful and attractive.
Speaking of this, the question about webpage background design is about the same, but new webpage production technologies are also emerging. Maybe you have read this article today, tomorrow I think it is too outdated. I wrote this article to attract the attention of the majority of Web Page makers on background design. After all, the background is too important for the web page. Of course, the content of the website should be the first.