Drupal Theming - 沒有尺寸約束的背景圖片

我使用禪宗作爲基本主題來爲我的網站製作一個新的主題。問題是我想爲頁眉和頁腳的背景圖像，直到我指定他們的高度和寬度，直到我沒有得到顯示。此外，在#header和#footer CSS中指定的高度和寬度必須匹配的確切尺寸原始圖像（尺寸較大），否則圖像不能正確顯示（部分被剪切）。有沒有一種解決方案（使用CSS或PHP），可以讓我爲頁眉和頁腳編寫CSS，而不需要任何尺寸限制，以便背景圖像可以自行調整？頁眉和頁腳不包含塊。在CSS的部分如下： -Drupal Theming - 沒有尺寸約束的背景圖片

#header 
{ 
      background-image:url(images/header.jpg); 
      background-repeat:no-repeat; 
      height: 
      background-position:center; 
} 

#footer 
{ 
     margin-top:0px; 
     background-image:url(images/footer.jpg); 
     height:391px; 
     background-position:center; 
} 

#footer-inner 
{ 
     text-align:center; 
     padding:4px 10px 10px 10px; 
}

來源

2009-12-26 niting

CSS中的背景圖像被設計爲在放置它們的div的背景中顯示自己。這意味着div的大小決定了您看到的圖像範圍。在你的情況下，由於你的頁眉區域沒有內容，所以#header在layout.css中設置了默認尺寸。

正如你所發現的，如果你的頭div沒有內容，你必須明確地將你的頭的大小設置爲你想要的尺寸，或者用你最初發布的CSS（推薦）或者帶有正確的空塊尺寸（除非在極少數情況下不推薦）。

來源

2010-01-06 13:50:01 keithm

如果您希望圖像自動縮放，您將需要使用img標籤爲每個圖像，和寬度/高度設置爲100％。這將自動將它們縮放爲與其父容器相同的大小。這意味着如果您希望圖像根據瀏覽器窗口的大小進行縮放，則需要將父容器的寬度/高度設置爲百分比，而不是固定的像素寬度/高度。

很少有網站會這樣做，您可能需要重新考慮並使用固定大小的圖片。

來源

2009-12-26 22:07:09

如果您使用預處理功能，您應該能夠根據您選擇的圖像設置頁眉和頁腳的類。您將不得不爲不同的類創建CSS來匹配圖像。

例如：

預處理功能

function themename_preprocess_page($vars) { 
    $classes = array('image1', 'image2', 'image3'); 

    $vars['header_class'] = array_rand($classes); 
}

CSS

#header .image1 { 
    background-image: url(path/to/image.jpg); 
    height: [imageheight] px; 
    width: [imagewidth] px; 
}

希望這有助於。

來源

2009-12-28 21:11:46

Drupal Theming - 沒有尺寸約束的背景圖片

回答

相關問題