Creating a Repeating Graphic at Left Page Border?

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • Dr. Bantham
    New Member
    • Mar 2007
    • 23
    • 3.8.x

    Creating a Repeating Graphic at Left Page Border?

    I am working on a custom style for my site which emulates a book publishing design. I am almost where I want to be with the basic format, textures and colors. However, one aspect I wish to integrate is a stamp design repeating down the left page border. I want this to start below the navbar and terminate before the bottom navigation strip (style select and link location). I know that this can be accommodated by using a fixed width style, but I want a fluid 100% width approach. I am attaching an image mock-up which conveys my intent. The stamp in the image was added via Photoshop. A margin space between the stamp and the content blocks would also be desired.

    There would be three graphic elements:
    1. The header which would include the small horizontal bar at the top of the image.
    2. The repeating stamp design, which does contain a black space at the top and bottom to allow for a fluid repeat.
    3. The footer which would include the small horizontal bar at the bottom of the image.
    From the searches I have performed, I understand that this can be accomplished with either table elements or CSS edits. I am unsure on how to perform either, therefore any help would be greatly appreciated!
    Attached Files
    THOMAS LIGOTTI ONLINE
    A Shining Brainless Beacon Of Elegant Mutations And Cunning Annihilations
  • Floris
    Senior Member
    • Dec 2001
    • 37767

    #2
    To apply a background: #hex url() element to your tag you can use repeat-y to repeat vertically only.

    style="background: #DDD url(vert-bg.gif) repeat-y;"

    Comment

    • Dr. Bantham
      New Member
      • Mar 2007
      • 23
      • 3.8.x

      #3
      Originally posted by Floris
      To apply a background: #hex url() element to your tag you can use repeat-y to repeat vertically only.

      style="background: #DDD url(vert-bg.gif) repeat-y;"
      Thank you, but this only accomplishes part of my objectives. When I place this in the Page Background CSS, it begins at the top of the page (just under the header area), while I want it to begin after the navbar area. Also, this method takes the place of the background image, which I wished to maintain. Lastly, this does not allow for the header and footer graphic which would close out the stamp block with the horizontal outlines. Instead, the whole graphic repeats, which looks quite shoddy. I want to cut the top and bottom off the image and have it placed at the top and bottom of the repeating section. Any further ideas?
      THOMAS LIGOTTI ONLINE
      A Shining Brainless Beacon Of Elegant Mutations And Cunning Annihilations

      Comment

      • Dr. Bantham
        New Member
        • Mar 2007
        • 23
        • 3.8.x

        #4
        Using a Table to Create a Repeating Graphic at Left Page Border

        I have discovered what seems to be the easiest way to replicate the repeating graphic outline. By removing the outline border from the graphic itself and repeating the bare graphic within a table cell as a background element, I can then create a cell border of the proper color to emulate the original. This works very well and eliminates the need to create a method for including separate graphics for the horizontal lines at the stamp header and footer. How can I create a table consisting of two cells (graphic column left border and body content right) which begins below the navbar and terminates just above the lower navigation strip (style select and links)? Hopefully this is possible and is not problematic with formatting all the various layouts (portal, forum, thread/post view, etc.).
        THOMAS LIGOTTI ONLINE
        A Shining Brainless Beacon Of Elegant Mutations And Cunning Annihilations

        Comment

        • peterska2
          Senior Member
          • Oct 2003
          • 8869
          • 3.7.x

          #5
          This will require editing of every page where you wish this image to be displayed. You can start it below the header by editing the header and footer templates to add the table code, but this cannot be done with the navbar template as the navbar is not used on every page.

          Comment

          widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
          Working...