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;
}

我还希望看到收缩或增长的容易程度;很确定这可以通过过渡网络工具包完成，但它只是找到并将其放在正确的位置。我已经尝试了各种方法来调整大小。老实说，我现在只是在猜测和检查。

谢谢你的时间！如果你需要什么，只需要问

Answer 1

您正在呼唤身体上的min-width和min-height。摆脱它们，它的工作正常。

编辑：你不需要过渡属性，调整大小本身也很流畅。并保持一致！或者您为所有浏览器制作100％或全部99％的背景图像。这将为您节省大量时间，因为它们之间存在细微的差异而您无法找到它的位置。

Answer 2

试试：

background-size: cover;

浏览器重新调整时如何调整背景图像

2 个答案: