HTML Learning Note 8--css setting a background image

Source: Internet
Author: User

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 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: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 shows
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-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

Contact Us

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.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.