div css background background

Background attribute - background is the core attribute in CSS. You should have a good understanding of it. This article discusses in detail all the related properties of background, even background-attachment, and introduces us to what it will look like in the upcoming CSS3, as well as the newly added background properties.

Using the background properties in CSS2

Review

There are five background-related properties in css2. They are:

background-color: The color that completely fills the background

background-image: The image used as the background​​​​​​

background-repeat: Determine whether the background image is repeated Flat

background-attachment: Determine whether the background image scrolls with the page

These attributes can be written in a simple attribute: background. It must be pointed out that background is responsible for the background of the content part of the element, including padding and border, but not margin. This is how it is handled in Firefox, Safari and Opera, as well as IE8. However, borders are not included in IE7 and the damned IE6, and the difference is as shown in the picture example below.

In IE7 and IE6, Background does not include border

Basic attributes

Background color attribute

background-color is used to describe the color of the filled background. There are multiple ways to define the color of the fill. The following methods are equivalent:

background-color: blue;

background-color: rgb(0, 0, 255);

background-color: #0000ff ;

background-color can also be set to transparent, so that the elements below it can be displayed.

Background image property

background-image allows you to use your own image as the background. It is closely related to background-color. Once your image is not large enough to tile the entire element background, the empty portion will display the color set by background-color. It is extremely simple to use, but you must remember the positional relationship between the image and the css file:

background-image: url(image.jpg);

If the image is in the folder, write it like this, using relative paths:

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

Background repeat attribute

By default, your image will repeat horizontally and vertically until it covers the entire element. But sometimes you might just want to repeat in one direction. Then set it like this:

background-repeat: repeat; /* Default value. The image will be spread repeatedly in all directions */

background-repeat: no-repeat; /* No repetition. Only one picture appears*/

background-repeat: repeat-x; /* Horizontal repeat spread*/

background-repeat: repeat-y; /* Vertical repeat spread*/

background-repeat: inherit; / * Use the background-repeat attribute value of the parent element. */

Background position attribute

The background-position attribute controls the position of the background image in the element. The key to mastering is that background-position is the upper left corner of the image.

The following is a demonstration of the background-position property. Of course we set the background-repeat attribute to no-repeat.

/* Example 1: Default. */

background-position: 0 0; /* i.e. the upper left corner of the element. */

/* Example 2: Move to the right. */

background-position: 75px 0;

/* Example 3: Move to the left. */

background-position: -75px 0;

/* Example 4: Move down. */

background-position: 0 100px;

背 You can set the position of the background picture at will

Background-posity attributes can also work in keywords, percentage and other units, not to be accurately used in pixels (PX).

Keywords are very commonly used, in the horizontal direction they are:

left

center

right

in the vertical direction:

top

center

bottom

Use them like before:

background-position: top right;

Percentage is used in the same way:

background-position: 100% 50%;

The effect is like this:

The smiley face image is set to the middle of the right side of the element

Background attachment property

The background-attachment property defines what happens to the background image when the user scrolls the page. It has three possible values: scroll, fixed and inherit. Inherit still inherits the settings of its parent element. To fully understand the background-attachment attribute. First, you have to figure out what happens to the web page when the user scrolls the page. If you set the value to fixed, then when you scroll down the page, the content will scroll down, but the background will not scroll with it. The result is as if the content is scrolling upwards. Of course, if you set the value to scroll, the background will scroll.

Let’s look at an example below:

background-image: url(test-image.jpg);

background-position: 0 0;

background-repeat: no-repeat;

background-attachment: scroll ;

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

Look at another fixed example:

background-image: url(test-image.jpg);

background-position 0 100% Move within, here is an example:

background-image: url(test-image.jpg);

background-position: 0 100%;

background-repeat: no-repeat;

background-attachment: fixed ;

Part of the picture disappeared because it went out of the element boundary.

Simple Background attribute

We can write these attribute settings in an attribute. Its format is as follows:

background:

For example, these settings...

background-color: transparent;

background-image: url(image.jpg);

background-position: 50% 0 ;

background-attachment: scroll;

background-repeat: repeat-y;

... can be written as:

background: transparent url(image.jpg) 50% 0 scroll repeat-y;

And you don’t need to set every value. If you don't write it, the default value will be used. Therefore, the above can also be written like this:

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

"unconventional" application of background

In addition to setting beautification elements, the background attribute also has a wide range of other Non-routine uses.

Faux Columns

When using float attribute layout, it can be difficult to ensure that the length of two columns is equal. If the two elements are of different sizes, the background image will be messed up. Faux columns are a simple solution, first published on A List Apart.

To put it simply, set an overall background image in their parent element, and the position of the vertical rows in the image exactly matches the actual position of the separation.

Text Replacement

The choice of fonts on the web is slim. Our common method is to create pictures of text, but doing this alone is not friendly to search engines. A popular way to do this is to use the background attribute to display the image of the text and hide the text above it. This is friendly to search engines and screen readers, and you can see cool fonts in the browser.

For example, text information is written like this:

Blogroll

If the text image is 200px wide and 75px high, then we use the following css code to represent the entire image :

h3.blogroll {

width: 200px;

height: 75px; /* to display the entire image. */

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

text-indent: -9999px; /* Move text 9999px to the left to hide text*/

}

Easier Bullet Points

The default style of the unordered list option may not look so good. Then we use background images to make them look nicer:

ul {

list-style: none; /* Remove the default style. */

}

ul li {

padding-left: 40px; / * Keep the content inside and leave space for the background display. */

background: url(bulletpoint.jpg) 0 0 no-repeat;

}

Background properties in CSS3

There are a lot about background in CSS3 Changes in properties. The most obvious one is the addition of support for multiple background images, as well as four new attributes and changes to existing attributes.

Multiple background images

CSS3 allows you to use more than one background image for an element. The code is the same as in CSS2, you can separate several images with commas. The first declared image will appear at the top of the element, like this:

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

New attribute 1: Background Clip

This attribute brings us back to the original question, about the border and background attributes. The

background-clip property allows you to control where your background is displayed. Possible values ​​are:

background-clip: border-box;

background is displayed within the border, the same way it is now. .

background-clip: padding-box;

backgrounds are displayed within the padding, not the border, which is the same as IE6.

background-clip: content-box;

backgrounds are only displayed within the content, not border or padding.

background-clip: no-clip;

Default value, the same as border-box.

New attribute 2: Background Origin

This attribute needs to be used together with the background-position attribute. You can change the way background-position is calculated (just like background-clip).

background-origin: border-box;

background-position is calculated from border.

background-origin: padding-box;

background-position is calculated from padding.

background-origin: content-box;

background-position is calculated starting from the content.

For examples of the application of background-clip and background-origin properties, please see CSS3.info.

New Property 3: Background Size

The background-size property is used to redefine the size of your background image. Possible values ​​are:

background-size: contain;

Shrink the image to fit the element size.

background-size: cover;

Expand the image to fit the element size.

background-size: 100px 100px;

Redefine size.

background-size: 50% 100%;

Redefine with percentage.

You can take a look at the example: CSS 3 specifications

New attribute 4: Background Break

In CSS 3, elements can be split into multiple parts (for example, the inline element span can occupy multiple lines). The background-break property controls how the background image is displayed in multiple sections.

Possible values ​​are:

Background-break: continuous; Default value

Background-break: bounding-box;: Add the value between the two parts into consideration.

Background-break: each-box;: Consider each section individually.

Changes in the Background Color attribute

The background-color attribute in CSS3 supports foreground color and background color: background-color: green / blue;

For this example, the default color is green. If it cannot be displayed, then Use blue.

Changes to the Background Repeat property

Do you still remember that in CSS 2, images may partially disappear due to crossing the border? CSS 3 has two new possible values ​​to solve this problem:

space: Set the spacing between repeated images.

round: Repeating images automatically resize to exactly fill the element.

background-repeat: example of space: CSS 3 specifications.

Background Attachment property changes

background-attachment has a new possible value: local.. It is related to scrollable elements (such as having the attribute overflow: scroll;). When the background-attachment value is scroll, the background image will not scroll with the content. Now with background-attachment:local, images can scroll with the content.