Div css background

 

Background is the core attribute in css. You should have a full understanding of it. This article discusses in detail all the related attributes of the background, including the background-attachment, the appearance of the background in the coming CSS3, and the newly added background attributes.

Use the background attribute in CSS2

 

 

Review

Css2 has five background-related attributes. They are:

 

 

 

Background-color: Fill in the background color completely

Background-image: The image used as the background

Background-position: determines the position of the background image.

Background-repeat: determines whether the background image is repeated.

Background-attachment: determines whether the background image is scrolling along with the page

 

These attributes can be written in a simple attribute: background. It must be noted that background is responsible for the background of the element content, including padding and border, but not margin. This is done in Firefox, Safari, Opera, and IE8. However, border is not included in IE7 and Internet Explorer 6, just as shown in the following figure.

 

In IE7 and IE6, Background does not include border.

Basic Attributes

Background color attributes

Background-color is used to describe the color of the filled background. There are multiple methods to define the fill color. 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 under it can be displayed.

Background image attributes

Background-image allows you to use your own image as the background. It is closely related to background-color. Once your image is insufficient to tile the background of the entire element, the blank part will show the color set by background-color. It is extremely simple to use, but remember the relationship between the image and the css file location:

Background-image: url(image.jpg );

If the image is written in a folder, the relative path is used as follows:

 

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

Background repeat attributes

By default, your images will repeat horizontally and vertically until the entire element is fully covered. But sometimes you may just want to repeat in one direction. So set it as follows:

Background-repeat: repeat;/* default value. The image will be repeated in all directions */

Background-repeat: no-repeat;/* no duplicate. Only one image appears */

Background-repeat: repeat-x;/* horizontal repeated spreading */

Background-repeat: repeat-y;/* vertical repeated spreading */

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 understanding is that the background-position is the position in the upper left corner of the image.

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

/* Example 1: Default .*/

Background-position: 0 0;/* upper left corner of the I. e. 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 location of the background image at will.

The background-position attribute can also work in units such as keywords and percentages. pixel (px) is not necessarily used accurately ).

Keywords are frequently used. In the horizontal direction, they are:

Left

Center

Right

Vertical direction:

 

Top

Center

Bottom

Use them as before:

 

Background-position: top right;

The usage of percentages is the same:

 

Background-position: 100% 50%;

The result is as follows:

 

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

Background attachment attributes

The background-attachment attribute defines what will happen to the background image when the user scrolls the page. It has three possible values: scroll, fixed and inherit. Inherit is still inherited from its parent element. You must fully understand the background-attachment attribute. First, you need to find out what happened to the web page when you scroll through the page. If you set the value to fixed, When you scroll down the page, the content will scroll down, and the background will not scroll. The result is as if the content is scroll up. Of course, if you set the value to scroll, the background will scroll.

Here is 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 image will scroll up until it disappears.

Let's look at another 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 worth noting that the background image can only be moved within its element. The following is an example:

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

Background-position: 0 100%;

Background-repeat: no-repeat;

Background-attachment: fixed;

 

Some images disappear because of the element boundary.

Simple Background attributes

We can write these attributes in a single attribute. The format is as follows:

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:

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

You do not need to set each value. If you do not write, the default value is used. Therefore, the above Code can also be written as follows:

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

Background "unconventional" applications

In addition to setting beautification elements, background attributes also have a wide range of unconventional uses.

 

Faux Columns

When the float attribute is used for layout, it is difficult to ensure that the length of the two vertical lines is equal. If the two elements are of different sizes, the background image is messy. Faux columns is A simple solution, which is first published in A List Apart.

To put it simply, they set an overall background image in their parent element. The vertical position in the image exactly matches the actual location separated.

Text Replacement

There is little room for selecting fonts on the web. Our common method is to create text images, but this is unfriendly to search engines. To this end, a popular method is to use the background attribute to display text images and hide the text on them. This is friendly to search engines and screen readers, and allows you to see cool fonts in your browser.

For example, write text information like this:

<H3 class = "blogroll"> Blogroll

If the text image is px wide and 75 PX high, we will use the following css code to show the entire image:

H3.blogroll {

Width: 200px;

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

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

Text-indent:-9999px;/* move the text 999999px to the left to hide the text */

}

Easier Bullet Points

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

Ul {

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

}

Ul li {

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

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

}

Background attributes in CSS3

CSS3 has many changes to background attributes. The most obvious difference is the support for multi-background images. There are also four new attributes and modifications to existing attributes.

Multi-background image

CSS3 allows you to use more than one background image for an element. The Code is the same as that in CSS2. You can use commas to separate several images. The first declared image will appear at the top of the element, as shown in the following figure:

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

New property 1: Background Clip

This attribute allows us to go back to the initial issue about the border and background attributes.

The background-clip attribute allows you to control where your background is displayed. Possible values include:

Background-clip: border-box;

The background is displayed in border in the same way as the current one ..

Background-clip: padding-box;

Backgrounds is displayed in the padding, rather than the border, which is the same as IE6.

Background-clip: content-box;

Backgrounds is only displayed in the content, rather than border or padding.

Background-clip: no-clip;

The default value is the same as that of border-box.

New property 2: Background Origin

This attribute must be used with the background-position attribute. You can change the calculation method of background-position (just like that of 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;

The background-position is calculated from the content.

For examples of background-clip and background-origin attributes, see CSS3.info.

 

New attribute 3: Background Size

The background-size attribute is used to redefine the size of your background image. The values include:

 

Background-size: contain;

Zoom out the image to fit the element size.

Background-size: cover;

Expand the image to fit the element size.

Background-size: 100px 100px;

Redefines the size.

Background-size: 50% 100%;

Use percentage to redefine.

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

 

New attribute 4: Background Break

In CSS 3, elements can be divided into multiple parts (for example, the inline element span can occupy multiple rows ). The background-break attribute controls how a background image is displayed in multiple parts.

 

Possible values:

Background-break: continuous; default value

Background-break: bounding-box;: add the value between two parts ..

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

Changes in the Background Color attribute

In CSS3, the background-color attribute supports foreground and background colors: background-color: green/blue;

 

 

In this example, the default color is green. If it cannot be displayed, it is blue.

Changes to the Background Repeat attribute

Do you still remember that the image in CSS 2 may disappear due to a pass-through? CSS 3 has two new possible values to solve this problem:

 

 

Space: Set the interval between repeated images.

Round: the duplicate image is automatically resized to fill in the element.

 

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

 

Changes to the Background Attachment attribute

Background-attachment has a new possible value: local .. It is related to elements that can be rolled (for example, overflow: scroll ;).. When the value of background-attachment is scroll, the background image does not scroll with the content. Now there is a background-attachment: local, and the image can be rolled along with the content.