Drupal 主题 - 没有尺寸限制的背景图像答案

【问题标题】：Drupal Theming - Background images without dimensional constraintsDrupal 主题 - 没有尺寸限制的背景图像
【发布时间】：2009-12-26 21:00:02
【问题描述】：

我使用 zen 作为基本主题来为我的网站创建一个新主题。问题是我希望页眉和页脚的背景图像在我为它们指定高度和宽度之前不会显示。此外，#header 和 #footer 内的 CSS 中指定的高度和宽度必须与原始图像（尺寸很大），否则图像无法正确显示（其中部分被剪切）。有没有一种解决方案（使用 CSS 或 PHP）可以让我为页眉和页脚编写 CSS 而没有任何尺寸限制，以便背景图像自我调整？页眉和页脚不包含任何块。 CSS的一部分如下：-

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

【问题讨论】：

标签： php css drupal drupal-6 theming

【解决方案1】：

如果您希望图像自动缩放，您需要为每个图像使用img 标签，并将宽度/高度设置为 100%。这将自动将它们缩放为与其父容器相同的大小。这意味着如果您希望图像根据浏览器窗口的大小进行缩放，则需要将父容器的宽度/高度设置为百分比，而不是固定的像素宽度/高度。

很少有网站会这样做，您可能需要重新考虑并使用固定尺寸的图片。

【讨论】：

【解决方案2】：

CSS 中的背景图片旨在将它们自己显示在它们所在的 div 的背景中。这意味着 div 的大小决定了您看到的图片的范围。在您的情况下，由于您的标题区域没有内容，#header 在 layout.css 中设置了默认尺寸。

正如您所发现的，如果您的标题 div 没有内容，您必须明确地将标题的大小设置为您想要的尺寸，或者在您最初发布（推荐）的 CSS 中，或者使用具有正确尺寸的空块（不推荐，除非在极少数情况下）。

【讨论】：

【解决方案3】：

如果您使用预处理功能，您应该能够根据您选择的图像为页眉和页脚设置一个类。不过，您必须为不同的类创建 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;
}

希望这会有所帮助。

【讨论】：