在背景上浮動CSS圖像

我正在尋找一個自定義的CSS網頁，但我很難讓所有的圖片顯示，除非我使最小高度在900px左右。該指數的代碼如下所示，在背景上浮動CSS圖像

<head> 
<style type="text/css"> 
@import url("stylesheets/mystyle.css"); 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Small Biz Labs</title> 

</head> 

<body> 
<div class="wrap"> 
     <div class="conatiner" align="center"> 
       <div class="header"> 
        <center> 
         <img src="images/logo.png" width="200" height="100" /> 
        </center> 
       </div> 
       <div class="text"> 
        <h1>Maybe a header</h1> 
        <p>some text</p> 
       </div> 
     </div> 
</div> 


</body> 


</html>

和CSS代碼看起來像這樣...

/* 
Document : mystyle 
Created on : Jul 18, 2012, 1:12:14 PM 
Author  : someguy 
Description: 
    Purpose of the stylesheet follows. 
*/ 

html { 
background:url(../images/bodybackground.jpg) repeat; 
margin:0px; 
max-height:100% 
} 

body { 
background:url(../images/paperbackground.jpg) repeat-y center; 
margin:0px; 
margin:0px; 
max-height:100%; 

} 


.wrap { 
background:url(../images/new_backdrop.png) repeat-x center bottom fixed; 
margin:0px; 
min-height:1050px; 
} 


.container { 
max-width:600px; 

} 

.header { 
} 

.text { 
text-align:left; 
max-width:600px; 
padding-left:10px; 
}

我試圖讓瓶子浮在兩個紋理我做了。允許將文本/圖像等放置在較小的紙質紋理中。到目前爲止，我只能做到這一點，如果我設置足夠大的最大高度。有關如何調整我的代碼的任何建議？我正在使用的圖片只有在獲得更多積分後才能發佈，但如果您想看到它們，請告訴我並且生病拍攝了jpgs和一個png（浮動的圖片）。

如果你想看到一個半活version 的jsfiddle：http://jsfiddle.net/wKtGv/

來源

2012-07-26 Zachary Thaxton

我很難理解你想要什麼。從您發佈的鏈接看來，您已經實現了這一點，以便我瞭解您的問題。 – Deekor 2012-07-26 03:32:40

它只看起來很好，因爲最小高度是如此之大，當我把它降低到圖像的實際大小，它會被切斷，圖像的真實大小是在http://smallbizlabs.net/bizlabs/images/ new_backdrop.png我希望它是動態的，所以這就是爲什麼我重複x，但它像被緩衝區推下來一樣。 – 2012-07-26 20:11:19

嘗試增加高度：100％;對身體和.wrap http://jsfiddle.net/wKtGv/13/

來源

2012-07-26 05:38:19

當我添加100％時，它仍然可以正常工作，但瓶子圖像高度約500px，但是當我嘗試將此設置爲最小高度時，它會切斷圖像的頂部。我使用了你的http://jsfiddle.net/wKtGv/13/，並且調整了從5000px到500的html，並將wrap的最小高度設置爲500px，然後剪切了我的圖片。有關如何處理浮動圖像以獲得它的任何建議是默認的底部和最低高度？感謝迄今爲止的迴應！ – 2012-07-26 20:07:17

在背景上浮動CSS圖像

回答

相關問題