Php Drupal主题化-无维度约束的背景图像

我正在使用禅宗作为基本主题，为我的网站创建一个新主题。问题是我希望页眉和页脚的背景图像在我为它们指定高度和宽度之前不会显示。此外，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;
}

---

如果希望图像自动缩放，则需要为每个图像使用

img

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

---

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

如果您使用预处理功能，您应该能够根据您选择的图像为页眉和页脚设置一个类。不过，您必须为不同的类创建CSS以匹配图像

例如：

预处理函数

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

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

CSS

---

希望这会有所帮助。

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

正如您所发现的，如果您的header div没有内容，您必须显式地将您的header的大小设置为所需的维度，可以使用您最初发布的CSS（推荐）或具有正确维度的空块（不推荐，除非在极少数情况下）

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