SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Sydney, Australia
    0 Post(s)
    0 Thread(s)

    Transparent borders

    Hi Paul, can you help me please.

    I have a page with a static 801px wide wrapper.
    I want to place transparent borders on either side of the wrapper. I have the files borderleft.png and borderright.png, both which are 27 px wide.

    The body has a background image which repeats, and the wrapper has a background color, white.

    I realise that there are two issues at hand, one being that of placing the transparent pngs and the other being getting alpha-transparency support in IE. ISsue one is more important to me atm.

    I had managed to place ONE of the borders, the left, by setting it as the wrapper's background image, repeat-y, top left, and giving the wrapper left padding of 27px. However, the border's transparent background was acually the white of the wrapper (as it should be), rather than the background of the body(which I want)

    So can you help me place the borders...


    My site is at: link

    and the borders are: Left and Right

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Hampshire UK
    183 Post(s)
    6 Thread(s)

    I have moved your post into a thread of its own

    I can't access your links as they just time out so I'm linking to an example that has transparent borders.

    both edges are added to this one image:

    They are then repeated down the main container. IE6 gets them via the alpha image loader which won't repeat the image but instead scales it to fit which results in the transparent image being stretched. However there is no other way to do it so there is no choice but to live with it.

    Refer to the demo for the exact code.

    Hope that helps


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts