直接在 css 文件里面写：body{background: url(../image/nav_on.gif)}
写好保存 css 后刷新网页，如果 index.html 和文件夹里面那个 php 页面看背景是不是会出现在整个网页上，没有的话说明你代码或引用css文件的方法有错误。
如果整个页面都出现了背景图的话，最大可能就是你的a没足够的宽度高度，背景实际上是引用正确了的，因为宽高不够，没显示出来，请把你的 #choice 设为块级元素并给足够的宽高值，即：
#choice{
display: block
width: xxx
height: xxx
}
a链接默认是行内元素，行内元素大小是由它里面包含的：文字、图片、多媒体及其他html元素的大小决定的。
行内元素里面包含的大小有多大，就只会把行内元素撑开成多大，比如：<a>123</a>
上面这个 a 链接里面只有 123 三个字符（假设字号是12px，行高是默认），那 a 的实际大小就只是比三个字占的面积略大一点，大概高15px、宽40px左右，你css里面设置宽度300px，高度300px，这个 a 是不会变大的，当你 display: block把 a 这个东西改成块级元素了，就会变成你设置的 300px 宽高。
还有个，经常有才学的人弄个浅色背景图，网页或a:hover后又是浅色背景色，那种不是没出来，而是视觉上看不出来。
效果如图
思路:div相对定位. 图片默认定位, 文字绝对定位
参考代码
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*div1下面 包含着1个图片和1段文字*/
#div1{
position: relative/*相对定位*/
width: 267px
height: 140px
}
/*图片部分的设置*/
#img1{
/*position: static默认定位,可以省略*/
width: 100%
height: 100%
}
/*文字的设置*/
#span1{
position: absolute/*绝对定位*/
width: 100%
bottom: 0px/*离底下0像素*/
left: 0px/*离左边0像素*/
text-align: center
font-size: 18px
color: white
}
</style>
</head>
<body>
<div id="div1">
<span id="span1">惬意的海岸,旖旎的风景</span>
<img src="img/hbfj.jpg" id="img1" />
</div>
</body>
</html>
