• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

making a translucent box

Question

Monkey Man    0

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?!

Share this post


Link to post
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Destian    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).

Share this post


Link to post
Share on other sites
  • 0
Fedorpheux    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.

Share this post


Link to post
Share on other sites
  • 0
Fedorpheux    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:

Share this post


Link to post
Share on other sites
  • 0
BryanChung    1

Woah this is something interesting to learn about ... :)

Share this post


Link to post
Share on other sites
  • 0
jackwanders    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.

Share this post


Link to post
Share on other sites
  • 0
BryanChung    1

So we just need to make a transparent .gif out right?

Share this post


Link to post
Share on other sites
  • 0
Destian    0

Yes, but as I posted, it's not entirely transparent, as that wouldn't make any difference.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.