?
Solved

Picture being transparent

Posted on 2005-02-25
8
Medium Priority
?
181 Views
Last Modified: 2010-04-09
Hi

I am looking for a solution on how to make a picture transparent for a button.

I don't want to use a gif because the gradients look like crap when you use a gif.

I have played with using a PNG but on internet explorer it doesn't show the transparency.

And JPEG's don't have any transparency.

Here is my page http://rlcsound.com/newwebsite/

What I want is the buttons on the left to be transparent so that way when we go to other pages of other colors it won't matter what color I choose cause it will be transparent.

Also the menu is loaded from here.
http://rlcsound.com/menu.php

So basically I am looking for a solution on how to make it work in all browsers with the png or a better solution with the picture.

Fixitben
0
Comment
Question by:fixitben
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +1
8 Comments
 
LVL 19

Expert Comment

by:dakyd
ID: 13407189
Will an opacity help?  You can tweak the opacity to make it more or less transparent, just remember to change both the filter (for IE) and -moz-opacity.  There's a sample below, replace the src's with your images.  Hope that helps.

<html>
<head>
<style type="text/css">
img.button {
  filter : alpha(opacity=40);
  -moz-opacity: 0.4;
}
</style>
</head>

<body>
<img class="button" src="button1.gif" />
<img class="button" src="button2.gif" />
</body>
</html>
0
 
LVL 7

Author Comment

by:fixitben
ID: 13407310
no that won't work it makes the whole button transparent I just want the background to be transparent.   If you look at the page in mozilla everything is fine but in IE the last button is a PNG and the background shows up.  But the other buttons are just JPG's with the same background as the blue so you can't see the difference.  But I need this to be transparent so that I don't have to make a menu for every color background.  

Fixitben
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 13407583
Can't do it, IE inexcusably doesn't support PNG alpha.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 13

Expert Comment

by:StormyWaters
ID: 13407591
You can try this to fix it.
http://www.koivi.com/ie-png-transparency/
0
 
LVL 13

Accepted Solution

by:
StormyWaters earned 2000 total points
ID: 13407610
This might be a slightly less code-intensive way to do it.
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13410311
Hi fixitben,

I'm not so sure that using PNG instead of GIF really solves your problems with transparency. Given the very different colours of each page, it's pretty well imposible to matte images to look nice against every background. In this instance, I'd maybe just go with the JPGs as long as they are well optimised.

BTW you've got a slight typo in the header section ('Chirstian').
0
 
LVL 10

Expert Comment

by:Havin_it
ID: 13410369
Aaagh, please ignore the above. I've just looked at the links above and must admit the effect is much better with PNG, if you're prepared to code for it. Ho hum...
0
 
LVL 7

Author Comment

by:fixitben
ID: 13413876
Code Was great I just hadn't had time to reply.

It took me a bit to get it just right with the rollover menu I have but now it works like a charm.

Thanks
Fixitben
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

741 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question