CSS设置背景图宽度100%，高度自适应

html-css012

CSS设置背景图宽度100%，高度自适应,第1张

padding-top= (高度/宽度)*100%即图片的高度与宽度的比例,因此就能实现背景图宽度100%，高度自适应

为了达到更好的效果再配合cover和center

1、首先准备一张设置为背景的图片，这边准备的是一张650px*347px的图片。

2、然后建立一个html文档，将它和背景图片放到一个文件夹中。

3、编辑html文档，这边建立一个div，设置宽度为700px，高度跟背景图一样，为347px。

4、就给div设置背景图片。

5、在浏览器中预览会发现图片平铺了，这不是想要的效果。

6、然后可以给div再加上属性，-moz-background-size:100% 100%background-size:100% 100%。

7、这样设置后就会发现背景图片拉伸至100%了。

#header{height:700px/*这个值改的越大显示的就会越多,图片就不会被挡住了!*/background:#FFFFFF}

#header div.lc{background:url(http://bbsimg.house.focus.cn/upload/photos/2710/wNLOHqbi.jpg) no-repeat}

#header div.rc{background:url() no-repeat top right}

#header div.tit{top:2000pxleft:20pxline-height:2200pxfont-size:20pxfont-family:黑体}

#header div.tit a.titlink{color:#FFFFFFtext-decoration:新会计人}

#header div.tit a.titlink:visited{color:#FFFFFFtext-decoration:none}

#header div.desc{top:33pxleft:20pxcolor:#FFFFFFfont-size:13px}

#tabline{top:670pxbackground-color:#FFFFFF}

#tab{top:670pxbackground:url(http://img.baidu.com/hi/temp1/tabbg.gif) repeat-x}

#tab a.on,#tab a.on:link,#tab a.on:visited{margin-top:3pxborder-left:1px solid #FFFFFFborder-right:1px solid #FFFFFFborder-top:1px solid #FFFFFFline-height:19pxbackground-color:#F3F1F1color:#197CAEfont-size:14px}

#tab span{color:#FFFFFFfont-size:14px}

#tab a:link{color:#FFFFFFtext-decoration:nonefont-size:14px}

#tab a:visited{color:#FFFFFFtext-decoration:nonefont-size:14px}

#tab2{background:#DAE9F5}

#tab2 span{color:#000000font-size:12pxfont-weight:bold}

#tab2 a{font-size:12px}

#tab2 a:link{color:#0000CC}

#tab2 a:visited{color:#0000CC}

#comm_info div.line{background:url(http://hi.51try.net/code.asp?url=http://hi.baidu.com/up%5fand%5fup) no-repeat topheight:130pxpadding-bottom:40px}