• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 216
  • Last Modified:

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
0
nsitedesigns
Asked:
nsitedesigns
  • 8
  • 5
  • 5
  • +1
3 Solutions
 
sammySeltzerCommented:
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
0
 
nsitedesignsAuthor Commented:
I cannot view your image
0
 
nsitedesignsAuthor Commented:
here is screen shot of lights.png file.  It shows transparency.
http://screencast.com/t/mEVC7dnyyj
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
Can you attach the image.
0
 
nsitedesignsAuthor Commented:
i did earlier.  here it is again.
0
 
nsitedesignsAuthor Commented:
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.
0
 
GaryCommented:
Remove float:left on the image
0
 
GaryCommented:
After the above...
Add display:block to the image

(press submit by mistake)
0
 
Dave BaldwinFixer of ProblemsCommented:
I can see it.  You need to give "container_lights" class the same height as the image (72px).  Then you will probably want to remove the border around it.
0
 
nsitedesignsAuthor Commented:
Wahoo - display block worked!  Thanks Gary (and others)  for your quick advise.
0
 
GaryCommented:
^^^^
Easier solution
(actually both as easy ;o)

Curious why it's happening though
0
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
GaryCommented:
Ahh yeah, never clicked (too hungover)
Dave probably deserves half the points as his solution is just as relevant
0
 
nsitedesignsAuthor Commented:
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;
      
}
0
 
Dave BaldwinFixer of ProblemsCommented:
I think maybe the border I saw was from using Firebug and WebDeveloper at the same time so never mind.
0
 
nsitedesignsAuthor Commented:
you are crazy like that!

lol
0
 
Dave BaldwinFixer of ProblemsCommented:
Hmmph!!  I am Perfectly Normal!!
0
 
nsitedesignsAuthor Commented:
sure - just like the rest of us!
0
 
Dave BaldwinFixer of ProblemsCommented:
EggZactly!!!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 8
  • 5
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now