Home/ Questions/Q 554469
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T11:42:46+00:00

I ‘m using zen as the basic theme to make a new theme for

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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).

    • 0