SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Jun 2007
    Location
    Sydney, Australia
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    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...

    Thanks

    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
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    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.

    http://www.pmob.co.uk/temp/transparent-test4.htm

    both edges are added to this one image:

    http://www.pmob.co.uk/temp/images/tr...ent-border.png

    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


Bookmarks

Posting Permissions

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