CSS Background Properties Background detailed

Go

This article describes the background properties of CSS background, including the new background properties in CSS3. If you are a beginner of CSS, you can also view the CSS floating properties and CSS transparency properties described earlier.

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

Background-color: Specifies the color of the fill background. Background-image: references a picture as a background. Background-position: Specifies the position of the element background picture. Background-repeat: Decide whether to repeat the background picture. Background-attachment: Determines whether the background graph 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.

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);

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:

ackground-repeat:repeat;/*default, tile in horizontal and vertical directions*/background-repeat:no-repeat;/*uneven paving. The image is displayed 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 parent element's Background-repeat property*/

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.

    The following example sets a background image and uses the Background-position property to control its position, and also sets the   background-repeat  is   no-repeat . The unit of measure is pixels . The first number represents the x-axis (horizontal) position and the second is Y Axis (vertical) position .

/* */* * */* */background-positio n:75px 0; /*  */background-position: -75px 0; /*  */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.

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:top right;

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%;

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%.

Background-attachment

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

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;

shorthand properties for backgrounds you can put the attributes of the background together in one row instead of writing them out individually each time. The format is as follows:background: "Color " "image" "Position" "attachment" "repeat" for example, the following statement

Background-color:transparent;background-image:url (image.jpg); background-position:50% 0; Background-attachment: Scroll;background-repeat:repeat-y;

Can be combined as a single line:

Background:transparent URL (image.jpg) 50% 0 scroll repeat-y;

And you do not need to specify each value. If you omit the value, the default value for the property is used. For example, the above line has the same effect as the following:

Background:url (image.jpg) 50% 0 repeat-y;

General usage of the background

In addition to the obvious usage that can be used to make elements more elegant, the background can be used for other purposes as well.

Copy Bar

When using the Float property of CSS to locate layout elements, it is difficult to make sure that the same length is the same for two or more columns. If the length is different, one of the columns will have a shorter background than the other, which destroys the entire design.

The copy bar is a very simple background trick, and this technique was first published in a List Apart. The idea is simple: instead of setting the background for each column individually, set a background map for each column's parent element. The design of all the columns is included in this picture.

Text substitution

On a Web page, the selection of fonts is quite limited. You can use tools such as SIFR to customize fonts, but this requires the user to enable JavaScript. A simple way to apply to any browser is to use the desired font to make a text image and use this image as the background. This way, the text still appears in the document tag for search engine retrieval and screen browser recognition, but the preferred font is displayed in the browser.

For example, the HTML tag might be something like this:

"H3" Blogroll "/h3"

If you have a 200-by-75 picture with a better-looking font, you can replace the text in the following way:

{/**/background:url (blogroll-text.jpg) 0 0 no-repeat/* *//**/}

A simple dot

It's not necessary to look at the dots in the list. Instead of having to deal with all the different List-style properties, simply hide them and replace them with a background map. Because the images are optional, the dots can look more beautiful.

Below, let's change a no-list to a rounded dot:

{  /**/}{  /**/  Background:url (bulletpoint.jpg) 0 0 no-repeat;}

Background in the CSS3

There are many improvements in the background of CSS3. Most notable are the options for multi-background images, as well as the addition of 4 new properties.

Multi-background

CSS3, you can apply one or more pictures as a background to an element. The code is the same as in css2, just use commas to distinguish each picture. The first declared picture is positioned at the top of the element, and other pictures are ordered under it, for example:

Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

New properties: Background trimming (Background-clip)

This brings us back to the topic that the article began to discuss about the display of the picture inside the frame. It is described as a "background depiction area".

The Background-clip property is used to enhance the control of the background display position. The possible values are:

* Background-clip:border-box;

The background appears inside the border.

* Background-clip:padding-box;

The background is displayed inside the padding (padding) instead of within the bounding box.

* Background-clip:content-box;

Displays the background only within the content, not inside the padding (padding) and inside the border.

* BACKGROUND-CLIP:NO-CLIP;

The default value, as with Border-box.

New attribute: Background origin (Background-origin)

This attribute is used in conjunction with Background-position. Background-position (similar to background-clip) can be calculated from the border, inner filler, or content box.

* Background-origin:border-box;

Begins the calculation of background-position with the border as the origin point.

* Background-origin:padding-box;

The padding starts at the origin and calculates the background-position.

* Background-origin:content-box;

Start calculating background-position with the content box as the origin.

For a different explanation of Background-clip and Background-origin see Css3.info

New property: Background size (background-size)

The background-size is used to adjust the size of the background map. There are several possible values:

* Background-size:contain;

Shrink the image to fit the dimensions of the element (keeping the pixel's aspect ratio)

* BACKGROUND-SIZE:COVER;

Expands the picture to fill the element (keeping the pixel's aspect ratio)

* background-size:100px 100px;

Resize a picture to a specified size

* background-size:50% 100%;

Adjusts the picture to a specified size. Percentages are relative to the dimensions of the containing element.

Take a look at a few examples on the CSS3 rules website.

New attribute: (Background-break)

In CSS3, an element can be divided into several separate boxes (for example, to make an inline element span span multiple lines). The Background-break property is used to control how the background is displayed in these different boxes.

Possible values are:

* background-break:continuous;

The default value. Ignoring the distance between boxes (that is, the element is not broken into multiple boxes, it is still a whole)

* Background-break:bounding-box;

Calculate the distance between the boxes

* Background-break:each-box;

Redraw the background individually for each box

Improvement of background color (background-color)

Background-color a slight improvement in the CSS3. In addition to setting the background color, you can set a back fade if the underlying background of the element is not available.

This is accomplished by adding a slash (/) before fading back, for example:

Background-color:green/blue;

In this example, the background color should be green. However, if the underlying background map is not available, the back color is blue instead of green. If you do not specify a color before the slash, the default is transparent (transparent).

Improvements to background tiling (background-repeat)

CSS2 when a picture is tiled, it is truncated at the end of the element. CSS3 introduced two properties to fix this problem:

* Space: Apply the same amount of white space to the picture until the entire element is filled

* Round: shrink the image until it is tiled full of elements

About Background-repeat:space; An example of this can be seen on the CSS3 rules website.

Improvement of background attachment (background-attachment)

The Background-attachment property adds a new value: Local. This is used to match the elements that can be scrolled (set to Overflow:scroll; Element). When Background-attachment is set to scroll (scroll), the background map does not scroll with the content of the element scrolling.

When set to background-attachment:local , the background graph scrolls with the content scrolling.

CSS Background Properties Background detailed