Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Naroa Luque
1,364 PointsHTML: white background in image buttons
Hi, I am following the build a simple website tutorial and I have built a button with an image (doing a little bit of outsourcing) using the next impute in HTML:
<form action="#">
<input type="image" src="img/SobreNosotros.png" alt="Sobre nosotros" onMouseOver="this.src='img/SobreNosotros(rollover).png'" onMouseOut="this.src='img/SobreNosotros.png' ">
The problem is that, even if the image is saved as a .png with a transparent background, the image has a white background that I can't get rid off. I have also tried saving it as .gif and I have the dame problem. Do you have any advice on how to make the background of the button-image transparent?
Thank you in advance for any help you can offer.
5 Answers
Gordon Jiroux
8,728 PointsWhat tool are you using (Photoshop, Gimp, etc)?
Let's use Photoshop for an example:
When you create a "new" image you are asked about dimensions. On that same dialog, you are asked about the background... choose Transparent....
Also, make sure you're in RGB mode (not indexed)... sometimes "Color profile" can play into this as well, but only under certain circumstances (so lets ignore it for now... but if it's a problem switch it to sRGB)
for existing images... Make sure you have no "Indexed" or "Back"ground" layers...if you do, add a new transpaent layer above it, then delete the locked background layer. If you do not see a layers tab, go to Window -> Layers (or hit F7)
also go to Image -> Mode, and make sure RGB is selected
When saving, make sure you select png-24... go to File -> Save for Web and Devices select an output window, and choose PNG 24 and check "Tansparency"
If none of this works, then you are in a situation where you need to convert to sRGB
*** Moderators, I've tried to answer this question without being too specific; but with a tool as complex as photoshop and with so many different things it could be, I also tried to cover all bases ***
Dan Ridley
Courses Plus Student 14,839 PointsThanks a lot for your help Gordon Jiroux
If you are still having trouble Naroa Luque then maybe Mat Helme can help. He is awesome with this stuff.
Naroa Luque
1,364 PointsThank you so much Gordon, it worked!!!
I am using Illustrator. The document colour code was set in CMYK and changing it to RGB fixed the problem. I could never have imagined that the solution would be so simple :)
Gordon Jiroux
8,728 PointsYou're very welcome.
For the most part "Print" is CMYK and "Screen/Web" is RGB... FYI, when you do a conversion between CMYK and RGB without correcting the colors, they may be a bit "Off", but then again, that's assuming your monitor is "calibrated" (most people don't calibrate their monitors, so it'll look different from screen to screen anyway)... It's also possible that you won't notice the difference at all...
Naroa Luque
1,364 PointsThanks for the explanation :) I usually remember to change to RGB when it is for screen, but I forgot this time and I didn't think at all that would affect so much the final outcome in this case.