The background design of the Web page is very important, especially for the personal homepage, the background of a home page is equivalent to the wall floor of a room, a good background not only can affect visitors to the content of the Web page acceptance, but also affect the audience's impression of the entire site. If you often pay attention to other people's website, you should find that on different sites, and even on the same site on different pages, there will be a variety of different background design. What are the different styles of the background, as well as their design methods are, now I will make a more complete summary.
1. Color background
Color background design is the simplest, but also the most common and most important, because compared to the picture background, it has unmatched display speed advantage. In a Web page file, you typically specify the color background of a page by using the <body> tab, and its HTML syntax is:
<body bgcolor= "Color" >
Where the "color" means different colors, you can use a variety of different color methods, more commonly used in the direct use of the color of the English name, such as blue, yellow, black, etc., you can also use the hexadecimal representation of colors, such as #0000ff, #FFFF00, # 000000 and so on, in addition can also use the percentage value method and the integer method, the effect is the same.
Although the color background is relatively simple, but also have a lot of places to pay attention to, if you want to design the background color according to the different page content of the warm and cold state, according to the layout of the page design background color and page content of the best visual collocation and so on.
2. Sand background
Sand background is actually the category of picture background, its main feature is that the entire page background can be seen as a local background of repeated rearrangement, in such a background to the sand-like background is common, so we will be collectively known as the sand background.
Beginner home Page makers have this experience, when trying to take their photos as the background of the page, but found that the browser shows more than just a photo, but the same photo in the horizontal and vertical direction of the repeated arrangement. This is the browser processing picture background of the law method, using this rule we can use a small picture as the background of the page, so that it automatically repeated on the page, covered the entire page, so that the volume of the page greatly reduced.
The reader is probably already aware of the sand background principle and implementation method, is to find a small picture, the smaller the better, but note to make the final background looks like a whole, rather than a number of pictures piled. The HTML syntax for its implementation is as follows:
<body background= "Picture" >
Where the "picture" represents the URL path of the background image.
3. Strip background
The stripe background is similar to the background of the sand, it applies to the page background in the horizontal or vertical direction of the repeated arrangement, while the other side up is not regular. It is also the use of the browser to the image background of the automatic repeat arrangement, and the background of the sand is different from it is only the picture in one Direction repeats.
In the vertical direction of the example, first with the image processing software to make a left-to-right blue-white gradient horizontal bar picture, its length and the width of the page is equivalent. Also through
<body background= "Picture" >
Set it to the background of the page, after the browser is displayed, it becomes the entire page from left to right blue-white gradient of the column color background. Of course, similar methods can be used to achieve the horizontal direction of the stripe background of the repeated arrangement.
4. Photo background
It's a bit exciting to see pictures of yourself or friends as the background of the page, but the automatic repetition of the browser's image makes it difficult to achieve. What do we do? Only unexpected, not to do, here we use a little simple CSS. Add the following CSS statement between 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 your photos in the middle of the page in the page, and when you pull the scroll bar in the browser window, the photo is still in the middle of the page without scrolling along with the page content. If you feel that the photo is in the middle of the page is not satisfied, you can also arbitrarily adjust its position in the page, only need to adjust the "background-position" value on it.
5. Composite background
If you "accidentally" set the color background in the?lt;body> label when you practice the "photo background" above, what do you see? Does the color background work? Yes, you can see that your picture floats on top of the color background you set, both of which can be displayed normally. This is the charm of the composite background, more appealing is that when you set the picture background because of some unknown factor and can not be normal display, the browser can automatically use the color background you set up to replace. Its design method, I do not have to say more!
6. Local background
The background we are talking about is the background of the entire page, can you set the content of a part of the page for its own background? The answer is yes.
The most common is that in the design of the table, we can set a different background for the table, even in different table cells, we can also set the individual table cells own background. Take a look at the following table example:
<table border= "1" width= "height=" bgcolor= "#C0C0C0" >
<tr>
<TD width= "height=" bgcolor= "#00FFFF" ></td>
<TD width= "height=" ></td>
<TD width= "height=" bgcolor= "#00FF00" ></td>
</tr>
<tr>
<TD width= "height=" bgcolor= "#FFFF00" ></td>
<TD width= "height=" bgcolor= "#FF0000" ></td>
<TD width= "height=" bgcolor= "#FF00FF" ></td>
</tr>
</table>
The display in the browser as shown in the picture, you can see that not only for the table as a whole is different from the background of the page, that is, each cell can also set the different backgrounds.
In addition, we can also set a separate text paragraph background, or even for the text paragraph in a few words to set their own background, is not a bit quite good, this also needs to use some CSS. Please take a look at the following example:
<HTML>
<HEAD>
<TITLE> not just the background of the page </TITLE>
<style type= "Text/css" >
<!--
body{
BACKGROUND: #FFFFDD;
Color:red}
div{
background:red;
Color:white}
-->
</STYLE>
</HEAD>
<BODY>
<p style= "Background:black url (.. /images/bg.jpg); Color:black} ">
I remember Chairman Mao had such a poem: "<div> sat on the day 80,000 miles, patrol in the distance to see a thousand river." </div> "Great men are great, ... He went out in tens of thousands of. </P>
</BODY>
</HTML>
The display in the browser as shown in the picture, now is not a little excited, ah, the original paragraph can also have their own background. As long as you want, you can define your own background for any part of the page, making the page more beautiful and appealing.
Speaking of this, about the design of the Web page background is probably about the same, but the new Web page production technology is also emerging, perhaps today you read this article, tomorrow will feel that it is too outdated. The author writes this article, the goal is causes the extensive Web page system author to the background design attention, after all, the background is too important to the webpage, certainly, the website still must take the content as the first.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
