#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0

    Transparent/See through header?


    So I'm thinking of doing a header like the one seen in this site.

    http://www.i-am-tiago.com

    As you can see the header (part where he puts all his links to contact him and such) is kinda see though/transparent. Can be seen as you scroll down the page you can still see a little bit of the other parts of the page underneath the header. I've been looking at the code and nothing in the CSS, to me at least suggests how this is achieved.
    I'm just not seeing it. Does any one know how this is done? Is it in CSS or via his java script?


    Code:
    /* -------- Header -------- */
    DIV.header{width:100%;height:104px;text-align:center;background:transparent url('../images/headerbg.png') repeat-x; position:fixed;z-index:2;}
    DIV.head{width:975px;height:107px;margin:0 auto;}
    DIV.logo{float:left;}
    DIV.logo A.logo IMG{margin:24px 0 0 39px;border:none;}
    DIV.nav{margin:0;float:right;}
    DIV.nav UL.navbar{margin:0;padding:0;}
    DIV.nav UL.navbar LI{list-style:none;width:145px;float:left;background:transparent url('../images/navlibg.png') repeat-y left;}
    DIV.nav UL.navbar LI A{text-decoration:none;font:normal 24px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;padding:36px 0 36px 0;margin:0 0 0 2px;display:block;}
    DIV.nav UL.navbar LI A:hover{background-color:#e4563a;}
    Thanks!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    8
    Rep Power
    0
    Originally Posted by sw0800
    So I'm thinking of doing a header like the one seen in this site.

    http://www.i-am-tiago.com

    As you can see the header (part where he puts all his links to contact him and such) is kinda see though/transparent. Can be seen as you scroll down the page you can still see a little bit of the other parts of the page underneath the header. I've been looking at the code and nothing in the CSS, to me at least suggests how this is achieved.
    I'm just not seeing it. Does any one know how this is done? Is it in CSS or via his java script?


    Code:
    /* -------- Header -------- */
    DIV.header{width:100%;height:104px;text-align:center;background:transparent url('../images/headerbg.png') repeat-x; position:fixed;z-index:2;}
    DIV.head{width:975px;height:107px;margin:0 auto;}
    DIV.logo{float:left;}
    DIV.logo A.logo IMG{margin:24px 0 0 39px;border:none;}
    DIV.nav{margin:0;float:right;}
    DIV.nav UL.navbar{margin:0;padding:0;}
    DIV.nav UL.navbar LI{list-style:none;width:145px;float:left;background:transparent url('../images/navlibg.png') repeat-y left;}
    DIV.nav UL.navbar LI A{text-decoration:none;font:normal 24px 'YanoneKaffeesatzRegular',arial,sans-serif;color:#ffffff;text-transform:uppercase;padding:36px 0 36px 0;margin:0 0 0 2px;display:block;}
    DIV.nav UL.navbar LI A:hover{background-color:#e4563a;}
    Thanks!
    The transparency is in the .png he's using for the background of the header class. "../images/headerbg.png".

    If you make a .png in photoshop or whatever with 50% opacity, it can display that transparency in a web browser so you get that effect.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Thanks for that advice!! I was coming to that conclusion as well.

    However now when I try to do this in photo shop, I make an image, I delete the white background layer and make a new layer that has opacity of 50%. Then I save it and put it into my code it still does not show up as "see through". Any more advice?

    I researched a lot on how to make a transparent PNG and have even saved my file for the web and kept the transparency option. I'm still stuck...
  6. #4
  7. For POny!
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2012
    Location
    Amsterdam
    Posts
    416
    Rep Power
    115
    make sure its a png and not a jpg.

    Are you sure your image is transparent? because all this tiago does is indeed use a transparent png. nothing more
    (http://www.i-am-tiago.com/images/headerbg.png)
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    4
    Rep Power
    0
    Originally Posted by aeternus
    make sure its a png and not a jpg.

    Are you sure your image is transparent? because all this tiago does is indeed use a transparent png.
    Thanks for looking at this both of you, I figured out what was the problem, in my own code I had a z index error that wasn't allowing me to see the changes I was making and I was editing the wrong image.

    But it's good to know that the transparency doesn't come from the css it can simply come from how you make your image!

IMN logo majestic logo threadwatch logo seochat tools logo