Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Persuading IE to tile transparent PNGs - Possible?

    I'm trying to get a transparent png to tile in IE. At the moment I have a transparent '1px checkerboard GIF' tiling over a background photo and, well, it's not working out too good.

    I have a couple of methods already of getting IE to display (or fake) 24bit png transparency - but I'm missing (or just too thick) to see a way of tiling em!

    Anyone got any ideas please

    Kindest Regards,

    gary

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    So you are using a gif background image an then using the png in another element as a background trying to get things transparent yeah? Can you upload your gif and png so we can test out solutions.

  • #3
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hey aero,

    well really it's to do with the Mallorca villas site (in siggy)

    As you can probably see, the text goes to bits as soon as it's over the darker parts of the background - something definately to do with the transparent gif's on/off attempt at transparency (just a checkerboard, one pixel white, one transparent etc)

    I guess what I'm after is a, say 70% white background for the main content area - not too bothered how it can be done: Conditionals, JS, whatever. I just cant figure it

    Gary

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Hmm you could use filters, and opacity properties.
    Code:
    #someelement {
    filter:alpha(opacity=70);
    opacity:0.70;
    -moz-opacity:0.70;
    -khtml-opacity:0.70;
    }
    Only down fall to that is the text becomes opaque as well. I'll take a look at your site and see if I can help or not. One thing you could do is fake it. Use a 70% opaque png in a browser that supports it. Take a screen shot, and then crop the screen shot to an image in itself and then make the image line up with the background. This would work if the content wasn't going to get larger than the image. You can even do what you want in a graphics program. Import the background image and then put an opaque layer over that. Okay since your image is just a white image we can do something like this.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    padding:0;
    margin:0;
    
    }
    #container {
    width:553px;
    height:546px;
    padding:50px 0;
    margin:auto;
    background-image:url(contentbg.jpg);
    background-repeat:no-repeat;
    }
    #content {
    height:300px;
    width:300px;
    position:relative;
    margin:auto;
    background-image:url(trans.png);
    filter:alpha(opacity=70);
    }
    #thetext {
    position:absolute;
    top:0;
    left:0;
    }
    </style>
    
    </head>
    
    <body>
    <div id="container">
    <div id="content">
    <div id="thetext">Can't tell if this text is opaque or not</div>
    </div>
    </div>
    </body>
    </html>
    With trans.png being a 70% opaque image for the browsers that can read it. Using the filter:alpha(opacity=70) only IE will need to be opaque. This creates a problem. The text is now opaque, once before I found that making a div to hold the text and making it position:absolute; the text wasn't opaque anymore. But I think that only works on images. So with that said, if you don't mind living with lighter text in IE than in other browsers well okay then. I'll still see if the alpha preloader can work using a repeating background image.
    Last edited by _Aerospace_Eng_; 07-20-2005 at 01:10 AM.

  • #5
    Regular Coder Graft-Creative's Avatar
    Join Date
    Aug 2004
    Location
    Web Designer - North East Lancashire U.K.
    Posts
    842
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Aero, as always you are an absolute star! I'll have a go with your solutions tomorrow (it's 00.18 here in the UK!)

    BTW, where the heck is that helpfull member badge

    Many Thanks mate

    Gary


  •  

    Posting Permissions

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