怎么在PC上开发窄页面背景的h5网页

1、下面是一张图片，用来做背景图，可以看到，是比较窄的。

2、首先写个最简单的html页面，只有html、body、head标签。

然后设置一下body的背景图。

可以看到效果如下：

背景图被平铺了。

3、于是再加个样式no-repeat不让它平铺，效果如下：

背景图不平铺了，但居左了。

4、再加个样式，设置背景图位置居中：

background-position:center center。

效果如下：

背景图居中了，但是没有扩展开来。

5、我们再加个样式，设置背景图大小扩展开来：

background-size: contain。

效果如下：

背景图终于扩展开来了，有点h5的样子了。

6、我们在上面加入一些html内容来看看效果吧：

加入标题和内容，并设置居中。

效果如下：

感觉还可以，不过文字样式不太好看。

7、再加入一些样式，设置标题上间距、文字行高、文字间距。

h1样式加入：

padding-top: 3%;

p样式加入：

line-height: 1.5em;

letter-spacing: 0.1em;

效果如下：

是不是比刚才好看多了。

8、想加入一些其他的html内容吗，赶紧动手试试吧。