Drupal Theming - Imagens de fundo sem restrições dimensionais

Question

Estou usando o Zen como tema básico para criar um novo tema para o meu site. O problema é que eu quero imagens de fundo para cabeçalho e rodapé que não estão sendo exibidos até especificar uma altura e largura para elas. Além As imagens originais (que são dimensionalmente grandes), caso contrário, as imagens não estão sendo exibidas corretamente (partes delas são cortadas). Existe uma solução (usando CSS ou PHP) que me permitiria escrever o CSS para o cabeçalho e o rodapé sem nenhuma restrição dimensional para que as imagens de fundo se ajustem? O cabeçalho e o rodapé não contêm blocos. Uma parte do CSS é a seguinte:-

#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

As imagens de fundo no CSS são projetadas para se exibirem no fundo da div em que são colocadas. Isso significa que o tamanho da Div determina a extensão da imagem que você vê. No seu caso, como sua região de cabeçalho não possui conteúdo, o #Header possui as dimensões padrão definidas no layout.css.

Como você descobriu, se o seu cabeçalho Div não tiver conteúdo, você deve definir explicitamente o tamanho do seu cabeçalho para as dimensões desejadas, no CSS, como você publicou originalmente (recomendado) ou com um bloco vazio com as dimensões corretas (não recomendado exceto em raras circunstâncias).

Answer 2

Se você deseja que as imagens sejam dimensionadas automaticamente, precisará usar um img Tag para cada imagem e defina a largura/altura para 100%. Isso os escalará automaticamente para ter o mesmo tamanho que o contêiner pai. Isso significa que, se você deseja que as imagens escalem de acordo com o tamanho da janela do navegador, precisará definir a largura/altura do contêiner pai como uma porcentagem, e não uma largura/altura fixa de pixels.

Poucos sites fazem esse tipo de coisa, você pode querer reconsiderar e usar imagens de tamanho fixo.

Answer 3

Se você usar as funções de pré -processamento, poderá definir uma classe para o cabeçalho e o rodapé com base nas imagens que você escolher. Você precisará criar o CSS para as diferentes classes para corresponder às imagens.

Por exemplo:

Função de pré -processo

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

Espero que isso ajude.