Learn how to create a web page: full introduction to webpage background design
Source: Internet
Author: User
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, the <body> label is used to specify the color background of the page. The HTML syntax is as follows:
<Body bgcolor = "color">
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:
<Body background = "picture">
"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
<Body background = "picture">
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 the
<Style type = "text/css">
<! --
Body {background-image: url(myphoto.jpg );
Background-repeat: no-repeat;
Background-attachment: fixed;
Background-position: 50% 50%}
-->
</Style>
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 are not careful about the photo background in the exercise, do you also set it? Lt; body> The color background in the tag. 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 content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
