Home > Developer > Web Develop
Attention point: background:blue;
And
Background-color:blue;
Not the same!
First, about background settings:
1) background:blue;
2) Background-image:url (image name);
When the background has both a color and a picture, which one in the back is in effect, as shown in the following example;
Here is the "new song" of this picture as the background picture involved in this article.
When the picture is the background, if the picture is smaller than the page size, the picture will repeat until it is covered;
Word in the back when the word takes effect1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS Setting background image</title>6 </Head>7 <styletype= "Text/css">8 #picture9 {Ten width:600px; One Height:400px; A background:Blue; - Background-image:URL (ziti.png); - } the </style> - <Body> - <DivID= "Picture"> - + </Div> - </Body> + </HTML>View Code
Color at the back of the color in effect
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS Setting background image</title>6 </Head>7 <styletype= "Text/css">8 #picture9 {Ten width:600px; One Height:400px; A Background-image:URL (ziti.png); - background:Blue; - } the </style> - <Body> - <DivID= "Picture"> - + </Div> - </Body> + </HTML>View Code
Second, when using the following two kinds of time:
1) background-color:red;
2) Background-image:url (image name);
When the background color is set to both the color and the picture, the picture is first displayed. (Some sites not only set the background of the picture, but also set the background color ~ benefits, the amount, I know a lot of ~ is probably said to make the user experience better, reduce the error rate)
As shown in the following example:
Although Background-color is written in the back, but the picture first shows1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title>CSS Setting background image</title>6 </Head>7 <styletype= "Text/css">8 #picture9 {Ten width:600px; One Height:400px; A Background-image:URL (ziti.png); - background-repeat:no-repeat; - background-position:Center; the Background-color:Red; - } - </style> - <Body> + <DivID= "Picture"> - + </Div> A </Body> at </HTML>View Code
If you want to remove duplicate attributes, or control their repetition in x or y direction, you can use background-repeat:no-repeat in <style></style>;
Repeat-x; Fill in the horizontal direction
Repeat-y; Fill in vertical direction
The effect is as follows:
Four, in general, the background image from the top left corner of the shop, using the Background-position property can define its location, such as: right, middle and so on.
In addition, you can use the Background-position property to control the position of the picture precisely, as described in the next study note:)
V. background-attachment:fixed; When the page is large, you can make the picture disappear from view as the scroll bar moves, and it will always appear where the page is already defined.
HTML Learning Note 8--css setting a background image
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
