头部和脚步的那种大图在背景小屏幕是如何设置的

Question

整体是900PX，PSD中头部和脚步尺寸会大于900PX，这时候HTML和CSS要如何写呢

Answer 1

将图设为背景、不重复、居中，width:100%。

Answer 2

嗯，这个是整体内容900px，头部满屏的效果，上代码

html代码

<div id="head">
            <div class="margin">
                <a href="#" class="logo"><img src="images/logo.jpg" /></a>
                
                <div class="head_r right">
                    <div class="head_r_t">
                        <a href="#">设为首页</a>
                        <a href="#" class="te">收藏本站</a>
                    </div>
                    
                    <div class="search">
                        <div class="txt left">
                            <input type="text" placeholder="请输入关键字..." />
                        </div>
                        <input type="submit" class="sub left" value="" />
                        <div class="clear"></div>
                    </div>
                    
                </div>
                
                <div class="clear"></div>
            </div>
        </div>

        <div id="nav">
            <div class="margin">
                <ul>
                    <li class="first">
                        <a href="#">四个文字</a>
                    </li>
                    <li>
                        <a href="#">四个文字</a>
                    </li>
                    <li>
                        <a href="#">四个文字</a>
                    </li>
                    <li>
                        <a href="#">四个文字</a>
                    </li>
                    <li>
                        <a href="#">四个文字</a>
                    </li>
                    <li class="last">
                        <a href="#">四个文字</a>
                    </li>
                </ul>
            </div>
        </div>
</div>

css代码

  *{margin:0;padding:0;}
li{list-style:none;}
a{text-decoration:none;}
img{display:block;}
a img{border:0;}
input,textarea,select{outline:none;}

.left{float:left;}
.right{float:right;}
.over{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.clear{clear:both;height:0;overflow:hidden;}

.margin{width:900px;margin:0 auto;}
#head{height:110px;background:url(../images/t1.jpg);border-bottom:1px solid #860707;}
#head .logo{float:left;margin-top:40px;}

#head .head_r_t{text-align:right;margin-top:12px;font:12px/28px "";}
#head .head_r_t a{color:#fff;padding:0 10px;background:url(../images/t2.jpg) no-repeat right;}
#head .head_r_t a.te{padding-left:5px;padding-right:0;background:none;}

#head .search{margin-top:10px;}
#head .search .txt{padding:8px 5px 9px;background:#fff;}
#head .search .txt input{border:0;font-size:12px;float:left;width:213px;}
#head .search .sub{width:30px;height:31px;background:#000 url(../images/t3.jpg) no-repeat center;border:0;}

#nav{height:48px;background:url(../images/t4.jpg);border-top:1px solid #ac1f20;}
#nav ul li{float:left;width:134px;height:48px;text-align:center;font:12px/48px "";border-left:1px solid #ac1f20;border-right:1px solid #860707;
    padding-top:2px;margin-top:-2px;}
#nav ul li.first{border-left:0;}
#nav ul li.last{border-right:0;}
#nav ul li a{color:#fff;}

新手一枚，不足请指教~  

Answer 3

background:url("bg.jpg") center no-repeat;
background-size:100% 100%;

Answer 4

你是在询问图片自适应的方法？