请教大佬一个html＋css问题，为什么背景图片不能铺满？不知道哪里有问题（图片和代码在一个大文件夹下）
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>爱宠知识</title>
<style>
* {
margin:0;
padding:0;
}
.box {
margin:20px auto;
width:320px;
height:420px;
background-image:url(images\bg.gif);
border:1.5px solid #009900;
}
.tle {
border-left:5px solid #c9e143;
color:white;
font-size:23px;
margin:20px 15px 10px 15px;
padding-left:5px;
}
.news {
background-color:white;
margin:5px 15px 10px 15px;
}
.news ul li {
list-style:none;
border-bottom:1px dashed #a1aeb1;
margin:5px 5px 5px 5px;
padding-top:5px;
padding-bottom:7px;
}
.news ul li a {
font-size:15px;
font-color:#0066cc;
text-decoration:none;
}
a:link{
color:#0066cc;
}
a:visited{
color:#0066cc;
}
a:hover{
color:red;
}
a:active{
color:grey;
}
</style>
</head>
<body>
<div class="box">
<div class="tle">
<h4>爱宠知识</h4>
</div>
<div class="news">
<ul>
<li>
<img src="images\tb.gif" alt="">
<a href="#">养狗比养猫对健康更有利</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">日本正宗柴犬亮相，你怎么看柴犬？</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">狗狗歌曲《新年旺旺》</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">带宠兜风，开车带宠需要注意什么？</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">【爆笑】这狗狗太不给力了</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">狗狗与男童相同着装拍有爱造型照</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">狗狗各个阶段健康大事件</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a>
</li>
<li>
<img src="images\tb.gif" alt="">
<a href="#">为什么每次大小便后，会用脚踢土？</a>
</li>
</ul>
</div>
</div>
</body>
</html>
第一个为我的效果。第二个图为要求的效果
