SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Can this be done? Transparent graphics overlapping?

    Hi there,

    I have been thinking about creating transparent header images that overlap a greater back ground image. The idea is to create a header that is mildly transparent and provides structure independent of different backgrounds that load in various sections of the site behind it. I want the header graphic to be transparent to a certain percentage that reveals the back ground image behind it with out cutting different header images per section.

    I am looking for advise at this point that would enable me to pursue this direction. IE 6 is the how far I will degrade.

    Thanks much for your support!

  2. #2
    SitePoint Addict g1siberia's Avatar
    Join Date
    Dec 2008
    Posts
    236
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maybe i dont understand but I dont see how this would be hard. Your header images can be made into gifs or pngs with transparent backgrounds no problem. These would then sit on top of the background image.
    Your `structure independant` comment is hard to follow - please explain further if needed!

  3. #3
    SitePoint Addict jemple's Avatar
    Join Date
    Dec 2008
    Posts
    291
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just make the images semi transparent and place them relatively on the page?

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,169
    Mentioned
    232 Post(s)
    Tagged
    1 Thread(s)
    If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

    Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.

  5. #5
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Further Clarity...

    What I am trying to achieve is a layered effect with a background image having other transparent images over the top allowing the background image to show through the top image. I'll post an image file:

    http://www.powerbitwebdesign.com/cli...mple-light.jpg

    Note the header and footer are transparent images showing though to the background image.

    Thank you for your patience and input here...

    Billy

  6. #6
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,169
    Mentioned
    232 Post(s)
    Tagged
    1 Thread(s)
    Can't see anything, I had a firewall alert... If the transparency is applied to the full image, you can choose either to apply it to the gif or png (and then all that's been said is valid) or you can place each image in a different div and apply it to the div using CSS (the name of the property to use will be opacity for all browsers except ie that will use alpha instead)

  7. #7
    SitePoint Enthusiast Faseeh's Avatar
    Join Date
    May 2009
    Location
    I Do not have a permanent place to stay
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use two transparent images and control them with CSS and DIV. That way you can get a better result.

  8. #8
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I have a graphic in PS that is like %30 opacity, I just save that as a transparent gif or png 8 and layer that with my css?

    What are the tricks to this?

  9. #9
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,169
    Mentioned
    232 Post(s)
    Tagged
    1 Thread(s)
    If the picture has the right opacity applied, you simply put it inside a div and that's it. Whatever is underneath will show through.

    If you don't want to do that but you'd rather control the opacity though CSS, you will need to use the properties I gave you.

    As an example:
    Code HTML4Strict:
    <div class="semitransparent"><img src="name_of_pic.ext" alt="image with no opacity"</div>

    Code CSS:
    .semitransparent{opacity: 0.3; filter:alpha(opacity=30)}

    The filter alpha is for IE, because they use their own system instead of the standarized one.

    For stacking, you can postioned both elements and give them a z-index, which is the stack order

  10. #10
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by molona View Post
    If the picture has the right opacity applied, you simply put it inside a div and that's it. Whatever is underneath will show through.

    If you don't want to do that but you'd rather control the opacity though CSS, you will need to use the properties I gave you.

    As an example:
    Code HTML4Strict:
    <div class="semitransparent"><img src="name_of_pic.ext" alt="image with no opacity"</div>

    Code CSS:
    .semitransparent{opacity: 0.3; filter:alpha(opacity=30)}

    The filter alpha is for IE, because they use their own system instead of the standarized one.

    For stacking, you can postioned both elements and give them a z-index, which is the stack order
    This is all very interesting... Thank Molona for you remarks and willful sharing of intelligence...

    My question: are these techniques compatible with IE6? If not are there good hacks?

    I feel like I am getting somewhere... Thanks Molona!

  11. #11
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Quote Originally Posted by molona View Post
    If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

    Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.
    Stated here, Molona writes that IE does not support transparency unless the file is a png-8. She goes on to say that a png-8 is equivalent to a gif. Does this translate that IE will also recognize the transparency of a gif too?

  12. #12
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Hi there again....

    I have managed to create a small test template to try some of the techniques mentioned here in this thread.

    Seen Here:
    http://www.powerbitwebdesign.com/cli...wman/test.html

    However the png header is not transparent. I have saved it as a png-8 file with Matt = Black and with transparency settings but it is not allowing the background image to show through as seen in this example:

    http://www.powerbitwebdesign.com/cli...mple-light.jpg

    Any thoughts as to what has gone wrong?

    I am using Photoshop 7
    This has only been tested in MOZ

    Also here is my code:

    CSS
    HTML Code:
    /* stylesheet-1 Document */
    
    body {
     background: #fff; 
     font:76&#37; arial, verdana, helvetica, sans-serif;
    }
    
    * { margin:0; padding:0;
    }
    
    #wrapper {width:1006px; margin:0 auto;
    }
    
    #logo {background: #000 url(logo.jpg) top left no-repeat; width:250px; height:120px; float: left;
    
    }
    #banner {background: transparent url(header.png) top left no-repeat; width:756px; height:120px; float:left;
    
    }
    
    /* ------- Section Pages ------- */
    
    #environment {background: #000 url(bg.jpg) no-repeat; width:1006px; height:750px;
    }
    
    
    
    

    HTML
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>New Man Test</title>
    <meta name="keywords" content="" />
    <meta name="description" content=""  />
    <meta name="title" content="" />
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="includes/stylesheet-1.css" />
    </head>
    <body>
    <div id="wrapper">
       <div id="environment">
          
    	  
        <div id="logo"></div>
        <div id="banner"></div>
    
       </div>
    </div>
    
    </body>
    </html>

  13. #13
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by molona View Post
    If you are targeting IE6, then use gifs or 8-bit pngs. IE and PNG are not a good combination, IE does not display the transparency unless it is a 8-bit png, that is, the equivalent to a normal gif.

    Another approach would be to use javascript to trick IE to display PNGs properly, but of course, this will not work if javascript is turned off.
    Oh, I gotcha Molona... You are saying IE doesn't recognize png-24 which are transparent and it only recognizes png-8 which are not fully transparent alike gifs.

    OK


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
  •