CSS Background Properties Background detailed

CSS Background Properties Background detailed

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.

Background in CSS2 (background)

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.

Basic properties

Background color (Background-color)

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

Code Background-repeat:repeat; /* Default value, tiled horizontally and vertically */

Background-repeat:no-repeat; /* Uneven shop. The image is displayed only once. */

Background-repeat:repeat-x; /* tile horizontally (along the x-axis) */

Background-repeat:repeat-y; /* Tile vertically (along 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.

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 .

Code /* Example 1: Default value */

background-position:0 0; /* The 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: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

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.

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 declaration

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:

Code H3.blogroll {

width:200px;

height:75px; /* So, the element would show the whole image. */

Background:url (blogroll-text.jpg) 0 0 no-repeat; /* Sets the background image */

Text-indent: -9999px; /* Hides the regular text by moving it 9999 pixels to the left */

}

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:

Code UL {

List-style:none; /* Removes default bullets. */

}

UL Li {

padding-left:40px; /* Indents list items, leaving, background image on the left. */

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