Analysis of the background background and background-position of CSS

This article mainly introduces the CSS background background, background-position use method, the need for friends can refer to the following

Background (background) is an important part of CSS and one of the basics of CSS that needs to be known. This article will cover the basic usage of the CSS background (background), including properties such as Background-attachment, as well as some common tips on background (background), and background in CSS3 (background ) (contains 4 new background (background) attributes).

Background in CSS2 (background)

Overview

There are 5 main background (background) attributes in CSS2, which are:

* Background-color: Specifies the color of the fill background.

* Background-image: Reference picture as background.

* Background-position: Specifies the position of the element background picture.

* Background-repeat: Decide whether to repeat the background image.

* Background-attachment: Determines whether the background map scrolls with the page.

These properties can all be combined into one abbreviated property: Background. One important point to note is that the background occupies all content areas of the element, including padding and border, but does not include the margin of the element. It works properly in Firefox, Safari, Opera and IE8, but background doesn't count border in IE6 and IE7.

Basic properties

Background color (Background-color)

The Background-color property fills the background with a solid color. There are many ways to specify this color, and the following methods get the same result.

background-color: blue;   
background-color: rgb(0, 0, 255);   
background-color: #0000ff;

Background-color can also be set to transparent (transparent), which makes the elements beneath it visible.

Background map (background-image)

The Background-image property allows you to specify a picture to display in the background. Can be used with the background-color, so if the picture is not repeated, the image is not covered in the place will be filled with the background color. The code is simple, just remember that the path is relative to the style sheet, so the following code, the picture and style sheet are in the same directory.

Background-image:url (image.jpg);

But if the picture is in a subdirectory named images, it should be:

Background-image:url (images/image.jpg);

Sugar companion tomatoes: use. /indicates the previous level of the directory, such as Background-image:url (.. /images/image.jpg); Indicates that the picture is in the images subdirectory in the parent directory of the style sheet. A bit around, but this everyone should know, I will not say.

Background tile (background-repeat)

When setting a background picture, the image is tiled horizontally and vertically to fill the entire element, by default. This may be what you need, but sometimes you want the picture to appear only once, or to tile in one direction only. The following are the possible setting values and results:

background-repeat: repeat; / * default, tile horizontally and vertically * /
background-repeat: no-repeat; / * Does not tile. The picture is shown only once. * /
background-repeat: repeat-x; / * tile horizontally (along the x axis) * /
background-repeat: repeat-y; / * tile vertically (along the y axis) * /
background-repeat: inherit; / * inherit the background-repeat attribute of the parent element * /

"Focus" background positioning (background-position)

The Background-position property is used to control the position of the background picture within the element. The trick is to actually specify the position of the upper-left corner of the picture relative to the upper-left corner of the element.
In the following example, a background image is set and the Background-position property is used to control its position, and the background-repeat is set to No-repeat. The unit of measure is pixels. The first number represents the x-axis (horizontal) position, and the second is the y-axis (vertical) position.

/ * Example 1: Default value * /
background-position: 0 0; / * upper left corner of the element * /
/ * Example 2: Move the picture to the right * /
background-position: 75px 0;
/ * Example 3: Move the picture to the left * /
background-position: -75px 0;
/ * Example 4: Move the picture down * /
background-position: 0 100px;

The Background-position property can be specified with other values, keywords, and percentages, which is useful, especially if the element size is not set in pixels.

The key words are not to be explained. On the x-axis:

* left* center* Right

On the Y axis:

* top* center* Bottom

The order aspect is almost the same as when using pixel values, first the x-axis, followed by the y-axis, like this:

Background-position:right top;

It is similar when using percentages. The main point is that when using percentages, the browser sets the position of the picture as a percentage of the element. It's good to see an example. The assumptions are set as follows:

background-position:100% 50%;

This goes 100% of the across the image (i.e. the very right-hand edge) and 100% of the the-the-the-Across the element (Remembe R, the starting point was always the Top-left corner), and the and the both line up there. The result is, the image is aligned to the right of the element and exactly half-way down it.

Sugar Companion Tomato: This paragraph did not think of a suitable translation, keep the original text, free translation.

Update: Thank you for the advice of Tianya, this paragraph to understand. When you use percent positioning, you are actually aligning the position specified by the percentage of the background picture with the percentage position of the element. In other words, the percentage positioning is a change of the background map and the alignment point of the element. Instead of using pixels and keywords to navigate, use the upper-left corner of the background map and elements to align the base point. For example the above example of background-position:100% 50%; is to align the 100% (right) of the background image with the 50% (center) of the element, which is the point of the 50% (center) of the 100%.

This once again illustrates the simple things that we have always thought we have mastered, and in fact, our limited knowledge of cognition.

Note that the origin is always the upper left corner , the final effect is that the smiley picture is positioned at the far right of the element, half the element at the top of the element, the effect and Background-position:right center; The same.

Background attachment

The Background-attachment property determines the state of the picture when the user scrolls the page. Three available properties are scroll (scrolling), fixed (pinned), and inherit (inherited). Inherit simply specifies that the element inherits the Background-attachment attribute of his parent element.

To understand Background-attachment correctly, you first need to understand how the page and viewport (view port) work together. The viewport (view port) is the part of the browser that displays the page (that is, the browser that removes the toolbar). The location of the viewport (view port) is fixed and does not change.

When you scroll down the page, the viewport (view port) is not moving, and the content of the page scrolls up. It looks like the viewport (view port) is scrolling below the page. If you set Background-attachment:scroll, the element background must also scroll as the element scrolls. In short, the background is tightly attached to the element. This is the Background-attachment default value.

Use an example to more clearly describe the following:

background-image: url(test-image.jpg);   
background-position: 0 0;   
background-repeat: no-repeat;   
background-attachment: scroll;

When you scroll down the page, the background scrolls up until it disappears.

But when the setting background-attachment is fixed, when the page scrolls down, the background stays in its original position (relative to the browser). That is, it does not scroll with elements.

Use another example to describe the following:

background-image: url(test-image.jpg);   
background-position: 0 100%;   
background-repeat: no-repeat;   
background-attachment: fixed;

The page has been scrolled down, but the image remains visible.

It is important to note that the background map can only appear in areas where the parent element can reach it. Even if the picture is anchored relative to the viewport (view port), if its parent element is not visible, the picture disappears. See the example below. In this example, the picture is at the bottom left of the viewport (view port), but only the part of the picture within the element is visible.

background-image: url(test-image.jpg);   
background-position: 0 100%;   
background-repeat: no-repeat;   
background-attachment: fixed;

As the picture begins outside the element, a portion of the picture is cut off.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!