SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    $books++ == true matsko's Avatar
    Join Date
    Sep 2004
    Location
    Toronto
    Posts
    795
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transperant PNG Image File on Background-Color

    I was just wondering if it is possible for a transperent PNG image (rounded corner) to be set as:

    <div id="one"></div>

    <style type="text/css">
    #one { width:400px; height:400px; background:black url(corner.png) left top no-repeat; }
    </style>

    The rounded corner png will be placed in the top-left corner without a repeat. The problem is that the black background color of the element will show up inside of the transparency of the PNG image.

    So, if the PNG image is a black colored rounded corner graphic, then the rounded corner will not show up at all (because the element's bg color will appear under the transparency.

    To make a rounded corner effect, I've used four corner images and a 9-cell table. This works, but, in terms of xhtml, its not really a good practice to use tables for content.

    Is there a way, only using css, to make it so that the background color of the element does not show up under the transparency of the a background image?
    I can't believe I ate the whole thing

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Location
    DK
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why do you place a black image on a black background???

    I find it obviously that you cannot see the image !!! / ???

    Change the background-color to e.g. "transparent" meaning no color.

    About png images: If you "only" use the image to make a solid colored box with rounded corners, you can use gif instead and save load time for your site.

    Hope this will help you...

    MEH

  3. #3
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When placing rounded corners within a box that has a background colour set, the images will need a solid outer colour to cover the corner of the box background - there is no way of using a transparency in this situation to allow the body background to show at the corner.

    To get transparency to work, the images will need to be placed visually outside the box (top and bottom), most likely in a separate container, with the area between them filled.


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
  •