Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

keep transparency in image

The 3 "lights" in the header should have a transparency in the upper portion of the image which is at the top of the browser.  I saved image as .png.  It shows it is transparent but when put into website it the transparent area turns white.  I event created a div for the lights image but that didn't help any.  I tried saving .png with a yellow matte background but that didn't work either.

screenshot of how it is supposed to look.
http://screencast.com/t/jGMyw1AuC

beta page
http://nsitedesigns.com/nsitedesigns/flipse/index.html
Avatar of sammySeltzer
sammySeltzer
Flag of United States of America image

I don't think that whatever you used for converting that image to transparency worked.

Take a look the same image that I converted to transparency using photoshop.

I called it back1.png
back1.png
Avatar of nsitedesigns

ASKER

I cannot view your image
here is screen shot of lights.png file.  It shows transparency.
http://screencast.com/t/mEVC7dnyyj
Avatar of Gary
Can you attach the image.
i did earlier.  here it is again.
i wonder if something isn't working right on ee.  I cannot view image someone else attaached and you guys can't see the image i attached.
ASKER CERTIFIED SOLUTION
Avatar of Gary
Gary
Flag of Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Wahoo - display block worked!  Thanks Gary (and others)  for your quick advise.
^^^^
Easier solution
(actually both as easy ;o)

Curious why it's happening though
A 'div' with no height and without a 'clear' doesn't push down the next 'div' which has a background color of white.  I would remove all unused CSS like the font specs that aren't going to be used in that 'div'.  It's looks like standard Dreamweaver "we're going to help you out" code.
Ahh yeah, never clicked (too hungover)
Dave probably deserves half the points as his solution is just as relevant
I added height to container-lights as recommended  as a good practice even though it looks good without.  Dave, there is no border to remove or font specs in the container-lights div.  Not sure what you are talking about.

.container_lights {
      width: 948px;
      margin: 0 auto;
      padding:0px;
      display:block;
      height:72px;
      
}
I think maybe the border I saw was from using Firebug and WebDeveloper at the same time so never mind.
you are crazy like that!

lol
Hmmph!!  I am Perfectly Normal!!
sure - just like the rest of us!
EggZactly!!!