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

Question

我使用 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;
}

Answer 1

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

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

Answer 2

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

正如您所发现的，如果您的标题 div 没有内容，则必须将标题的大小显式设置为所需的尺寸，无论是在您最初发布的 CSS 中（推荐），还是使用具有正确尺寸的空块（不推荐）除非在极少数情况下）。

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

希望这会有所帮助。