CSS 背景重复

CSS background-repeat

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

实例

body
{
background-image:url('图片地址');
}

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

body
{
background-image:url('图片地址');
background-repeat:repeat-x;
}

提示：如需垂直重复图像，请设置 background-repeat: repeat-y;

背景图像- 设置定位与不平铺

让背景图像不影响文本的排版，可以让图像设置成只显示一次，给其定位

可以使用CSS background-repeat: no-repeat  

实例

背景图像仅显示一次：

body
{
background-image:url('图片地址');
background-repeat:no-repeat;
}

背景图像与文本放置在同一位置，可能会干扰阅读。可以更改图像的位置。

CSS background-position

background-position 属性用于指定背景图像的位置。

实例

把背景图片放在右上角：

body
{
background-image:url('图片地址');
background-repeat:no-repeat;
background-position:right top;
}