div CSS Background background

The Background property--background is the core attribute in CSS. You should have a good understanding of it. This article discusses in detail all the relevant properties of background, even background-attachment, and introduces how it looks in the upcoming CSS3, as well as the newly added background attributes.

Using the Background property in CSS2

Review

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

Background-color: The color of the fully populated background

Background-image: A picture used as a background

Background-position: Determine the location of the background picture

Background-repeat: Determines whether the background picture is repeated flattened

Background-attachment: Determines whether the background picture scrolls with the page

These properties can be written in a simple attribute: background. It must be noted that background is responsible for the background of the element content section, including padding and border, but does not include margin. This is done in Firefox, Safari, and opera, as well as in IE8. But the border is not included in the IE7 and the evil IE6, as shown in the following image example.

Background in IE7 and IE6 did not include border

Basic properties

Background Color Property

The Background-color is used to describe the color that sets the fill background. There are several ways to define the color that determines 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 picture as the background. It has a close relationship with Background-color. Once your picture is not enough to tile the entire element background, the vacated section will show the color of the Background-color setting. It's extremely simple to use, but remember the location of the image with the CSS file:

Background-image:url (image.jpg);

If the picture is in a folder, it is written so that it is used relative to the path:

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

Background Repeat Properties

By default, your picture repeats horizontally and vertically until the entire element is covered. But sometimes you may just want to repeat in one direction. So set it up like this:

Background-repeat:repeat; /* Default value. Will repeat the spread of the picture in all directions */

Background-repeat:no-repeat; /* Do not repeat. Only one picture appears */

Background-repeat:repeat-x; /* Horizontal Repeat spreading */

Background-repeat:repeat-y; /* Vertical Repeat spread */

Background-repeat:inherit; /* Use the parent element's Background-repeat property value. */

Background Position Properties

The Background-position property controls the position of the background picture within the element. The key to mastering is that background-position is the upper-left corner of the picture.

The following is a demonstration of the Background-position property. Of course we set the Background-repeat property 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 image at will.

The Background-position property can also work in units of keywords, percentages, and so on, not necessarily using pixels (px) exactly.

Keywords are commonly used, in the horizontal direction are:

Left

Center

Right

The vertical direction is:

Top

Center

Bottom

Use them as you did before:

Background-position:top right;

The percentages are also used in the same way:

background-position:100% 50%;

The effect is this:

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

Background Attachment Properties

The Background-attachment property defines what happens to the background picture 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 property. The first thing you need to know is what happened to the Web page when the user scrolled the page. If you set the value to fixed, then when you scroll down the page, the content scrolls down and the background does not scroll. The result is as if the content is scrolling upward. Of course, if you set the value to scroll, the background will scroll.

Let's look at an example:

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 picture scrolls up until it disappears.

Let's look at a fixed example:

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

Background-position:0 100%;

Background-repeat:no-repeat;

background-attachment:fixed;

Scroll down the page and the background image is still visible.

It is important to note that the background image can only be moved within its element, and here is an example:

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

Background-position:0 100%;

Background-repeat:no-repeat;

background-attachment:fixed;

Some of the pictures disappeared because the elements were out of bounds.

Simple Background Property

We can write these attribute settings in an attribute. It has the following format:

Background: <color> <image> <position> <attachment> <repeat>

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 have to set each value. If you do not write, the default value will be used. Therefore, the above can also be written like this:

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

The "unconventional" application of the background

Background properties, in addition to setting up beautification elements, are also widely used for unconventional purposes.

Faux Columns

When using the Float property layout, it is difficult to ensure that the length of the two vertical lines is equal. If the size of the two elements is different, the background image is messy. Faux columns is a simple solution, first published in a List Apart.

The simple thing is to set a whole background picture in their parent element, and the position of the vertical line in the picture coincides with the actual position of the separation.

Text replacement

There is a small selection of fonts on the web. Our usual method is to make a picture of the text, but the only way to do it is not friendly to the search engine. A popular way to do this is to use the Background property to display the text picture, and to hide the text on it. This is both a search engine and a screen reader friendly, and in the browser can also see cool fonts.

For example, text messages are written like this:

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

H3.blogroll {

width:200px;

height:75px; /* To display the entire picture. */

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

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

}

Easier Bullet Points

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

UL {

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

}

UL Li {

padding-left:40px; /* Allow content to be inside, leaving room for the background display. */

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

}

Background properties in the CSS3

There are a lot of changes in CSS3 about background properties. The most obvious is the addition of multi-background image support, there are four new attributes, as well as changes to the existing attributes.

Multi-background images

CSS3 allows you to use more than one picture of a background for an element. The code is the same as in CSS2, you can separate several pictures with commas. The first declared picture appears 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 property again gives us the beginning of the question about the border and background properties.

The Background-clip property allows you to control where your background is displayed. The possible values are:

Background-clip:border-box;

Background is displayed in the border, the same way it is now.

Background-clip:padding-box;

Backgrounds are displayed in padding, not border, and are treated the same way as IE6.

Background-clip:content-box;

Backgrounds is only displayed within the content, not border or padding.

Background-clip:no-clip;

The default value, as with Border-box.

New Attribute 2:background Origin

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

Background-origin:border-box;

Background-position is calculated starting from border.

Background-origin:padding-box;

Background-position is calculated starting from padding.

Background-origin:content-box;

Background-position is calculated from the content start.

See Css3.info for examples of background-clip and Background-origin attribute applications.

New Property 3:background Size

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

Background-size:contain;

Shrink the picture to fit the element size.

Background-size:cover;

Expands the picture to fit the element size.

background-size:100px 100px;

Redefine the size.

background-size:50% 100%;

Redefined in percent.

You can look at the example: CSS 3 specifications

New attribute 4:background break

In CSS 3, elements can be split into multiple parts (for example, inline element span can occupy multiple rows). 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 values between the two parts into consideration.

Background-break:each-box;: Each part is considered separately.

Background Color Property changes

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

For this example, the default color is green and if it can't be displayed, it's blue.

Background Change of Repeat property

Remember that the picture in CSS 2 might be partially gone because of the bounds? CSS 3 has two new possible values to solve this problem:

Space: Sets the spacing of duplicate pictures.

Round: Repeats the picture automatically resizing to fill the element exactly.

Example of Background-repeat:space: CSS 3 specifications.

Background Change of Attachment property

Background-attachment has a new possible value: Local.. It is related to scrollable elements (such as owning attribute Overflow:scroll;). When the background-attachment value is scroll, the background picture does not scroll with the content. Now that you have background-attachment:local, the picture scrolls with the content.

