如何设置HTML背景图片
在网页的设计中，背景图片是非常重要的元素之一，可以为网页增添美感和个性。本文将介绍如何使用HTML设置背景图片。
使用HTML的style属性设置背景图片
使用HTML的style属性可以为HTML元素添加样式，包括背景图片。下面是一个例子，将背景图片应用于整个HTML页面：
<html style="background-image:url('background.jpg');">
...
</html>
在上面的代码中，通过style属性将background-image属性应用于HTML元素，将其背景图片设置为background.jpg。可以在url()中指定需要使用的图片名称和所在的路径。
同样的方式可以用于为单独的元素设置背景图片：
<div style="background-image:url('background.jpg');">
...
</div>
将上述代码应用于div元素后，该元素的背景图片将被设置为background.jpg。
使用HTML的background属性设置背景图片
除了使用style属性以外，HTML还提供了一个background属性来设置背景图片。与style属性不同的是，background属性必须应用于具体的HTML元素。
<body background="background.jpg">
...
</body>
上述代码将background属性应用于body元素，使得整个页面的背景颜色被设置为background.jpg。
需要注意的是，使用background属性时需要指定图片的路径。如果路径不正确，图片将无法显示。
使用CSS设置背景图片
虽然可以使用HTML元素的style属性或background属性来设置背景图片，但是更加推荐使用CSS来完成这个任务。CSS提供了更加灵活的方式来设置背景图片。
下面是使用CSS设置背景图片的示例代码：
<style>
body {
background-image: url('background.jpg');
}
</style>
<body>
...
</body>
在上述代码中，使用了一个CSS样式来设置body元素的background-image属性。这个样式可以放在<head>标签中的<style>标签中，也可以放在一个单独的CSS文件中，如下所示：
/* background.css */
body {
background-image: url('background.jpg');
}
上述代码定义了一个名为background.css的CSS文件，可以通过下列代码引入到HTML文档中：
<head>
<link rel="stylesheet" type="text/css" href="background.css">
</head>
使用CSS文件来设置背景图片的好处在于可以让CSS样式被多个HTML页面共用，从而达到代码重用的目的。
如何调整背景图片的显示方式
有时候，我们需要调整背景图片的显示方式，例如拉伸或平铺图片。这可以通过CSS的background-size和background-repeat属性来实现。
下面是一些常用的CSS样式，可以用于调整背景图片的显示方式：
/* 将背景图片从中心拉伸以填充整个元素 */
body {
background-image: url('background.jpg');
background-size: cover;
background-repeat: no-repeat;
}
/* 将背景图片从中心平铺，并重复显示 */
body {
background-image: url('background.jpg');
background-size: contain;
background-repeat: repeat;
}
/* 在x轴上平铺，y轴上拉伸以填充整个元素 */
body {
background-image: url('background.jpg');
background-size: auto 100%;
background-repeat: repeat-x;
}
/* 在y轴上平铺，x轴上拉伸以填充整个元素 */
body {
background-image: url('background.jpg');
background-size: 100% auto;
background-repeat: repeat-y;
}
需要注意的是，如果设置了背景图片的平铺方式，那么背景图片的大小将会被忽略。如果需要拉伸或压缩背景图片以适应元素大小，需要使用background-size属性。
总结
通过本文的介绍，我们了解了HTML设置背景图片的三种方式，以及调整背景图片显示方式的方法。在实际的网页设计中，应该根据需要选择合适的方式来设置背景图片，以达到最佳的效果。