How does CSS background-image tile?

Before the layout of the page, a DIV can only set a background image, set multiple backgrounds, to use multiple div nesting to achieve, so compatibility is better. This method is recommended if your website requires a browser-compatible version. The advent of CSS3 solves the problem that a DIV can only set a background, allowing a div to set multiple background images. Background-image can also set linear gradients, and so on.

About CSS3 's background, the function is very powerful, has many properties, like Background-size and so on, these attributes can write a blog to tell. About the other properties of Css3background, a blog will be later to tell the individual!

Css3/css1 Background-image Properties

Grammar:

background-image:<bg-image> [, <bg-image>]*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

Default value: None

Value:

None: No background map.

< URL: Use an absolute or relative address to specify the background image.

< Linear-gradient>: Creates a background image with a linear gradient. (CSS3)

< Radial-gradient>: Creates a background image using a radial (radioactive) gradient. (CSS3)

< Repeating-linear-gradient>: Creates a background image with a repeating linear gradient. (CSS3)

< repeating-radial-gradient>: Create a background image with a repeating radial (radioactive) gradient. (CSS3)

Description

Sets or retrieves the background image of an object.

If Background-image is set, it is also recommended that the author set Background-color to maintain a certain contrast with the text when the background image is not visible.

The corresponding script attribute is backgroundimage.

How to set the drawing background picture to fill the screen in CSS

The CSS code I wrote is

#bg {width:100%;height:100%;background:url (images/beijing.png);}

In this way he would repeat the picture overlay screen, I want to let him stretch the picture to fill the screen, how should write?

Background:url (images/beijing.png) repeat;

Add a genus

Background-size:100%;background:url (images/beijing.png) no-repeat;

Plus a genus Background-size:100%;background:url (images/beijing.png) no-repeat; The picture will be distorted Oh!

Either the frame limit, are set to 100%, I test here is covered, you see if there are other attributes affected.