以下示例展示背景图片的滚动，其中，滑杆改变背景图片的位置（background-position），复选按钮改变背景图片的重复属性（background-repeat）：

background-position :

0px

background-repeat :

no-repeat

【附】

一、红色边框div的CSS核心代码：

#mydiv {
	width: 600px;
	height: 400px;
	border: 1px solid red;
	background: url('https://638183.freep.cn/638183/t22/hl/229.jpg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: 0 0;
}

二、设置说明：

（一）盒子无需过多关心背景图片的实际宽高，因为我们使用 background-size: 100% 100%; 强制背景图片按盒子宽高尺寸呈现，图片将全影显示，虽然可能会有点比例失调。一般的建议是，盒子宽高和图片实际宽高最好是正比关系，至少不要有太大的误差。

（二）要让背景图片无间断衔接着滚动，需要将 background-repeat 属性设置为 repeat （或根据需要设置为 repeat-x 、 repeat-y ），原因是，只有设置为背景重复，背景位置改变到一定程度时才不会断档，从而实现不间断滚动。但要实现无缝衔接的话，需要图片的支持，具体说就是，图片的左右区域相似或相同（水平滚动时）或图片的上下区域相似或相同（垂直滚动时），可以很容易地使用作图软件对图片进行简单加工以满足此要求。

（三） background-position 属性是滚动的关键，它设置背景图片X方向和Y方向的位置， 0 0 表示背景图片始于盒子的左上角，然后，令 background-position 的值按盒子的尺寸改变，比如水平移动，示例盒子的宽度是 600px ，则，如果往 -600px 改变，背景图片将自右向左滚动，反之，如果往 600px 改变，背景图片将自左向右滚动。

（四）在以上思路基础上，可以为 background-position 设置CSS关键帧动画，这样就可以实现背景图片不间断无缝滚动。