Drupal Theming - Background images without dimensional constraints

Question

I 'm using zen as the basic theme to make a new theme for my site. The problem is i want background images for header and footer that are not getting displayed until i specify a height and width for them.Moreover, the height and width specified in the CSS inside the #header and #footer have to match the exact dimension of the original images (which are dimensionally large) otherwise the images are not being displayed properly (parts of them get cut). Is there a solution (either using CSS or PHP) that would allow me to write the CSS for the header and footer without any dimensional constraints so that the background images self adjust ? The header and footer contain no blocks. A part of the CSS is as follows :-

#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

If you want the images to automatically scale, you will need to use an img tag for each image, and set the width/height to 100%. That will scale them automatically to be the same size as their parent container. That means if you want the images to scale according to the size of the browser window, you'll need to set the parent container's width/height to be a percentage, and not a fixed pixel width/height.

Few sites do that sort of thing, you may want to reconsider and use fixed size images.

Answer 2

If you use the preprocess functions, you should be able to set a class for the header and footer based on the images you choose. You will have to create the CSS for the different classes to match the images though.

For example:

Preprocess Function

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

Hopefully this helps.

Answer 3

Background images in CSS are designed to display themselves in the background of the div they are placed in. This means that the size of the div determines the extent of the image you see. In your case, since your header region has no content, #header has the default dimensions set in layout.css.

As you have discovered, if your header div has no content, you have to explicitly set the size of your header to your desired dimensions, either in CSS as you originally posted (recommended) or with an empty block with the correct dimensions (not recommended except in rare circumstances).