CSS 背景图像

  • background-image 属性指定用作元素背景的图像。
  • 默认情况下，图像会重复，以覆盖整个元素。

实例
页面的背景图像可以像这样设置：

body {background-image: url("paper.gif");
}

还可以为特定元素设置背景图像，例如 <p> 元素：

p {background-image: url("paper.gif");
}

CSS 背景图像重复

  • 水平重复图像，设置 background-repeat: repeat-x;
  • 垂直重复图像，设置 background-repeat: repeat-y;
  • 只显示一次背景图像，设置 background-repeat: no-repeat;

实例：

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

CSS背景图像位置

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

实例：
把背景图片放在右上角：

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

CSS 背景附着

  • 固定背景图像，设置 background-attachment: fixed;
  • 指定背景图像随页面滚动，设置background-attachment: scroll;

以上内容均整理自W3C，如需阅读全文请点击链接。