背景圖片高度 - 不應指定

我認爲我的問題非常基本，出於某種原因，我的背景圖片未垂直重複。任何人都能看到爲什麼背景圖片高度 - 不應指定

body 
{ 
background: url("/images/blueback5.jpg") repeat-x scroll 0 0 transparent; 
font-family: Arial,Helvetica,sans-serif; 
font-size: 62.5%; 
} 
#global-wrap 
{ 
width: 100%; 
margin: 0 auto; 
text-align: left; 
width: 880px; 
} 
#global-inner 
{ 
background: url("/images/main_bg.gif") repeat-y scroll 0 0 #E4EAEF; 
font-family: Arial; 
font-size: 1.2em; 
margin: 15px 0 0 0; 
/*overflow: visible;*/ 
text-align: left; 
width: 880px; 
}

來源

2011-02-26 Paul

您不應指定明確的高度。高度應該由裏面的內容自動確定。另外，你真正的問題是什麼？ – thirtydot 2011-02-26 06:34:10

我試圖實現800像素到1100像素不同高度的圖像。 – Paul 2011-02-26 06:41:07

那麼出了什麼問題呢？當你超過800px的高度時，你的背景圖像是否不夠深？ – thirtydot 2011-02-26 06:42:45

根據該意見，在這裏不用這個略顯空洞的答案：

的想法是讓你的形象（/images/main_bg.gif）是880px寬，高1px（或24px，任何數字）。

您在background聲明中有repeat-y，這意味着圖像會以#global-inner的背景向下無限重複。

#global-inner的高度，所以背景圖像的高度將由該元素內的高度決定。

如果要確保高度至少爲800px，則可以改爲使用min-height: 800px。

來源

2011-02-26 06:49:34 thirtydot

謝謝三十，這使得現在很有意義。 – Paul 2011-02-26 06:53:38

沒問題。我看到你在你的問題中加入了你的'body' CSS，你需要對此有任何解釋嗎？ – thirtydot 2011-02-26 06:55:20

也許？我應該在那裏改變什麼？ – Paul 2011-02-26 07:00:28

圖像高度是不880px代替它的寬度是880px。身高只有20px。

下面是它用於背景的原始圖像。

The background Image

它簡單地使用repeat-y在CSS將其擴展到任何大小的#contentDiv了。

另外它簡單地覆蓋背景圖像與4角落背景圖像的獨立角落divs。

下面是已經完成的模板。

<div id="content"> 
    <div id="top-left-coner'> 
    </div> 
    ... 
    <div id="top-right-coner'> 
    </div> 
    ... 
    <div id="bottom-left-coner'> 
    </div> 
    ... 
    <div id="bottom-left-coner'> 
    </div> 
    ... 
    <div> 
    </div> 
</div>

然後用CSS分配背景圖像。

來源

2011-02-26 06:48:53

感謝您的回答！ – Paul 2011-02-26 06:52:57

他們選擇做出圓角的可怕方法:) – thirtydot 2011-02-26 06:59:23

我也做了同樣的事情;-(我顯然將不得不改變這一點，因爲我有絕對的邊距高度設置，這將會改變，取決於我更新了這個代碼，如果你有更好的解決方案，那麼我也應該這樣做： – Paul 2011-02-26 07:01:28

背景圖片高度 - 不應指定

回答

相關問題