html - 如何在浏览器重新调整时调整背景图片

Question

这是网站:http://designobvio.us/portfolio/body.html

我试过 css3, % base.似乎无法在浏览器调整大小时调整此背景图像的大小

我正在尝试模仿这种布局:http://www.googlezeitgeist.com/en/top-searches/rebecca_black

HTML:

<section class="bodySection">
<div id="body-wrapper" class="class="">
    <div id="me"></div>
    <div id="pattern"></div>
</div>
<div class="clearfix"></div>
</section><!--end of bodySection-->

CSS

html, body, #body-wrapper, .bodySection {height: 100%;}
#body-wrapper{
position: relative;
width:43%;
height: 100%;
}
#body-wrapper #me{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/Me.jpg') repeat-y;
z-index: 1;
-o-background-size:99% auto;
-webkit-background-size:100% auto;
-moz-background-size:99% auto;
background-size:100% auto;
    -webkit-transition: all 0.20s ease-out;
    -moz-transition: all 0.20s ease-out;
    -o-transition: all 0.20s ease-out;
    transition: all 0.20s ease-out;
}
#body-wrapper #pattern{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: url('http://designobvio.us/portfolio/img/sliderBG.png') repeat; 
z-index: 2;
}

我也希望看到收缩或增长的缓和；很确定这可以通过 transitions web kit 的东西来完成，但它只是找到并将它放在正确的位置。我尝试了各种方法来调整它的大小。老实说，我现在只是在猜测和验证。

感谢您的宝贵时间!如果您需要任何东西，请直接提出

Answer 1

您在 body 上调用了 min-width 和 min-height。摆脱它们，它工作得很好。

编辑:并且您不需要过渡属性，调整大小本身会很流畅。并保持一致!或者您将所有浏览器的背景图像设为 100% 或全部 99%。这将为您在将来出现微小差异而找不到位置时节省大量时间。