1 Reply Latest reply on May 5, 2006 12:14 PM by Webmzter

    CSS Backgrounds: one repeats, one doesn't

    Zaphod234
      Short version: can't get left-side navigation background to repeat, though the content does. I'm not using frames, but am using css.

      Longer version: About to mount my website, I changed my mind at the last minute and decided not to use a scrollbar for long pages, but just to show the whole page. I successfully used "repeat" for the content background, but the same thing did not work for the left-side navigation, for which I am using SSIs.

      Here is the mockup url:
      http://s87217786.onlinehome.us/Englishzz/faculty/facalph.shtml

      Here is the CSS file:
      #container {
      width: 810px;
      border-top-width: thin;
      border-right-width: medium;
      border-bottom-width: medium;
      border-left-width: thin;
      border-top-style: solid;
      border-right-style: outset;
      border-bottom-style: outset;
      border-left-style: solid;
      border-top-color: #FFFFFF;
      border-right-color: #666666;
      border-bottom-color: #666666;
      border-left-color: #FFFFFF;
      padding: 0px;
      }
      #navigation {
      background-image: url(../graphics/navigationback.gif);
      float: left;
      width: 180px;
      background-repeat: repeat;
      height: 100%;
      visibility: visible;
      overflow: visible;
      }
      #image {
      height: 160px;
      width: 160px;
      padding-top: 10px;
      padding-left: 10px;
      }
      #navbar {
      width: 160px;
      padding-top: 40px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 10px;
      }
      #banner {
      background-image: url(../Graphics/bannerback.gif);
      height: 75px;
      width: 621px;
      margin-left: 180px;
      color: #000000;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 18px;
      font-weight: bold;
      padding-top: 12px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 5px;
      text-transform: uppercase;
      }
      #content {
      background-image: url(../Graphics/contentback.gif);
      height: auto;
      width: 621px;
      margin-left: 0px;
      padding-top: 10px;
      padding-left: 5px;
      color: #000000;
      overflow: auto;
      font-family: Arial, Helvetica, sans-serif;
      background-repeat: repeat;
      }


      As always, thanks for any help.
        • 1. Re: CSS Backgrounds: one repeats, one doesn't
          Webmzter
          I, too, use SSIs in my websites, though none of them or the pages have backgrounds. However, I think your problem with the left-side nav is that (assuming it is contained in a table) there is no content in the lower rows that stretch the table cell down. One way to get around that is to create an empty row/cell and pop a shim.gif in there. (Create one square pixel in PhotoShop and save as shim.gif.) Then just adjust the width and height of the shim. For instance, if you want your red background to go another 300 pixels down, make your shim.gif 1 pixel wide by 300 high.
          I find shims incredibly useful for creating vertical lines, adding space above or below lines of text, etc.
          Good luck!