CSS自适应屏幕宽度显示背景图，外加自定义背景图显示高度，求教了

Question

/*头部*/
#header{z-index:999;background:url(images/titlebar_bg.png);position:relative; height:3rem;display: block;}
#header h1{color: #fff;font-size: 1.2rem;line-height: 3rem;text-align:center; font-weight:normal;}
#header .header_r{position: absolute;top: 0;right: 0;}
#header .header_r a {width: 3rem;height:3rem;display: block;padding: 0 0.2rem;text-indent: -999em;overflow: hidden;}
#header .header_l{position: absolute;top: 0;left: 0;}
#header .header_l a {width: 3rem;height:3rem;display: block;padding: 0 0.2rem;text-indent: -999em;overflow: hidden;}
#header .header_search .ico_03{ -webkit-background-size:2rem 2rem;-moz-background-size:2rem 2rem;background-size:2rem 2rem; }
因为是在手机上显示，这张titlebar_bg.png图宽度有500，现在的显示效果是没有自动把此图片自动缩小到屏幕合适的宽度的显示，其次就是，图片高度也只显示了一半，显示高度不知道在哪里改的。
高度已经知道修改了

Answer 1

如果不用其他library的话
用CSS3 的Media queries
eg： @media screen and (min-width: 400px) and (max-width: 700px) { … }

这个是官方wiki（宽度部分）
http://www.w3.org/TR/css3-mediaqueries/#width
希望能帮到你
个人推荐用bootstrap方便这里是官网
http://getbootstrap.com/css/追问

#header{z-index:999;background:url(images/titlebar_bg.png);position:relative; height:3rem;display: block;}
按这个格式怎么改

追答

@media screen and (min-width: 400px) and (max-width: 700px) {
#header{
z-index:999;
background:url(images/titlebar_bg.png);
position:relative;
height:3rem;display: block;
}

}
记得改变你所需要的min-width and max-width