背景的CSS样式.md

###Background Color

body {
    background-color: lightblue;
}

###Background Image

body {
    background-image: url("bgdesert.jpg");
}

By default, the background-image property repeats an image both horizontally and vertically.

仅水平重复：

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}

仅垂直重复：

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-y;
}

不重复：

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

调整图片位置：

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

固定位置，不随屏滚动

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

关于位置的属性，可以缩写如下：

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

###Background Size(仅限CSS3)

background-size: auto|length|cover|contain|initial|inherit;

auto: Default value. The background-image contains its width and height
length: Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
percentage: Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto"
cover: Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
contain: Scale the image to the largest size such that both its width and its height can fit inside the content area
initial: Sets this property to its default value.
inherit: Inherits this property from its parent element.

guangningyu/背景的CSS样式.md