• 0

making a translucent box


Question

go to www.blink182.com

if u squash ure internet explorer browser u see the pic in da backgorund showing through all the like news boxes etc how would i acheive this on my site?!

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

It's done with a transparent "mesh" image. Since browsers can't show different degrees of transparency (as in PNG), people create the effect by meshing fully transparent lines or patterns with fully visable lines or patterns. Then tile the picture in the background of an div, etc. The image used on the site you linked to is attached (don't believe I just went to the blink182 website, heh).

Link to comment
Share on other sites

  • 0

you should tell people to go to http://www.blink182.com/home.asp, cause what you're talking about isnt on the intro page. anyways, i dont really know. I thought maybe with css or something...i was looking through the source and this is how they open their see-through tables:

<table id='events-table' border='0' cellspacing='0' cellpadding='0'>
<tr class='asset event odd'>
<td class='datecol' align='left' valign='top'>

I can't find the answer in there, but maybe somebody else can. If it's not there, it's probably hidden somewhere near the beginning of the source.

Link to comment
Share on other sites

  • 0
It's done with a transparent "mesh" image. Since browsers can't show different degrees of transparency (as in PNG), people create the effect by meshing fully transparent lines or patterns with fully visable lines or patterns. Then tile the picture in the background of an div, etc. The image used on the site you linked to is attached (don't believe I just went to the blink182 website, heh).

agh, you're smarter than me. i didnt think about that. :rolleyes:

Link to comment
Share on other sites

  • 0

It's pretty simple. I use something similar on my site (check sig).

basically, just make a div:

<div id="idname">This box looks translucent</div>

And add the following CSS to your site:

#idname {
background: transparent url(imagename.gif) repeat top left;
}

Easy as pie.

**EDIT**

Site is Space For a Name. I guess I made my sig after the last backup.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.