今天捣鼓一下我的个人小网页，主要是想给它换个背景图片，之前那个纯色背景看久实在有点单调。我就琢磨着，得找张合适的图，让页面看着舒服点。

找图的过程

一开始也没啥头绪，就想着先去网上那些免费的图片库看看。搜一圈，图片倒是不少，各种风格的都有。风景、纹理、抽象的，看得眼花缭乱。

关键是要跟我网页的整体感觉搭调。我的网页内容比较简单，就是放点自己的东西，写点随笔啥的，太花哨的图肯定不行，会抢内容的风头。也不能太暗，影响看字。挑来挑去，选一张比较素雅的纹理图片，分辨率也还行，加载应该不会太慢。

用自己拍的照片也行，更有个人特色，不过我最近没拍啥合适的，就先用网上的。

开始动手设置

图片找好，接下来就是怎么把它弄到网页背景上去。我记得以前可以直接在HTML标签里写，但现在一般都推荐用CSS来控制样式，这样代码看着干净点，以后修改也方便。

我就打开我的CSS文件，准备给整个页面（也就是 `body` 标签）加个背景。

• 先是用 `background-image` 这个属性，把图片的路径写进去。路径得写对，不然图片出不来。

• 写好后刷新网页一看，图片是出来，但默认是重复平铺的，一格一格的，看着有点乱。

• 这不行，得让它不重复。我就加上 `background-repeat: no-repeat;` 这句。再刷新，图片确实不重复，就孤零零一张显示在左上角。

• 但这样背景大部分还是空白，不好看。我想要的是图片能铺满整个屏幕。这时候就得用 `background-size: cover;` 这个。它的作用就是让图片自动调整大小，刚好覆盖整个背景区域，而且图片比例不变，多余的部分会被裁掉。这个效果挺

• 为让图片居中显示（特别是当屏幕比较大，图片被裁剪的时候），我又加 `background-position: center center;`。

• 我还试一下 `background-attachment: fixed;`，这个可以让背景图片固定住，滚动页面的时候，内容滚上去，背景不动。感觉挺酷的，就先留着。

最终效果

这么一步步调整下来，效果就差不多。背景图片能很好地铺满整个页面，也不会随着滚动条滚动，视觉上感觉还挺舒服的。虽然只是个简单的背景图设置，但自己动手把它调到满意的样子，还是挺有成就感的。

整个过程就是不断尝试和调整。有时候写一条CSS没效果，就得检查是不是写错，或者是不是被其他样式覆盖。多刷新几次浏览器，看看实际效果，慢慢就好。搞定，心里也舒坦多。