前言

在css中，可以使用background-image或background属性来加载图片。这两个属性都可以配合url()函数来为元素设置背景图像。background-image属性为元素设置背景图像，而background是一个简化属性，可以在一个声明中设置所有背景样式，当然也包括背景图片。

一、常见的属性值

background-color：指定要使用的背景颜色

background-position：指定背景图像的位置

background-size：指定背景图片的大小

background-repeat：指定如何重复背景图像,一般设置no-repeat，表示不重复

background-origin：指定背景图像的定位区域

background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动

background-image：指定要使用的一个或多个背景图像

注意：元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。默认地，背景图像(background-image)位于元素的左上角，并在水平和垂直方向上重复。
 

以下是一个简单的例子，展示了如何使用CSS加载并显示一张图片：

二、style.css的样式文件 

css">        html {height: 100%;}body {margin: 0;padding: 0;background-image: url('../images/1.jpg'); /* 替换为你的图片路径 */background-position: center; /* 图片居中 */background-size: cover; /* 图片覆盖整个元素 */background-repeat: no-repeat; /* 不重复图片 */height: 100%; /* 高度设置为100% */}

这段代码将确保图片设置为整个页面的背景，并且图片会根据需要缩放以覆盖整个元素区域，保持图片的中心，不会重复。

三、使用CSS3属性background-attachment

background-attachment属性则用于将背景图片与元素一起滚动，如果希望背景图片完全占据整个屏幕，可以将该属性设置为fixed让其在屏幕上固定。
 

css代码写法

css"><style type="text/css">body {background-image: url("../images/1.jpg");background-repeat: no-repeat;background-position: center;background-size: cover;background-attachment: fixed;}
</style>

上面css代码的简化写法

css">        body {background: url("../images/1.jpg") no-repeat center fixed;background-size: cover;}