2012-02-26 14 views
0

を調整サイト:http://designobvio.us/portfolio/body.htmlは、相続人は、ブラウザの再調整

私はCSS3、%ベースを試みました。 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; 
} 

私は希望のブラウザは、私は、このレイアウトを模倣しようとしている

のサイズを変更したときにサイズを変更するためにこのような背景の画像を取得するように見えることはできませんまた、収縮や成長の容易さを見るのが好きです。かなりこれが移行のWebキットのもので行うことができますが、それは正しい場所に見つけて入れているだけです。私はこれをサイズ変更するために様々な方法を試みました。私は正直に推測して今チェックしています。

ありがとうございました!あなたが何か最も必要とするものがあれば

答えて

3

あなたはmin-widthmin-heightをあなたの体に呼びます。それらを取り除くとうまくいきます。

EDIT:トランジションプロパティは必要ありません。リサイズ自体は流暢に行われます。そして一貫してください!または、すべてのブラウザの背景イメージを100%または99%すべてにします。これは、小さな違いがあり、それがどこにあるのかを見つけることができないときに、将来あなたに多くの時間を節約します。

+0

は非常屋に感謝 –

0

試してみてください:

background-size: cover; 
関連する問題