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

JavaScript

Posted by Kim Connolly
Kim Connolly
2,475 Points

Image background transparency help. (Importing a photo and removing the white background)

So I uploaded a photo of a bicycle to replace the key and would like to learn/know how to remove that white background of the image to blend in with the dark grey of the web page color like the other images do? Below is my code so far. I only changed the img src of the first link. Does this have anything to do with the original image I am uploading or is it the code?

<!--Buttons--> <a href="javascript:bikeBell();"><img src="images/bike.png" alt="bicycle"></a> <a href="javascript:honkHorn();"><img src="images/steering-wheel.png" alt="steering wheel"></a> <a href="javascript:peelOut();"><img src="images/nos.png" alt="nos"></a>

https://teamtreehouse.com/workspaces/31531342

Kim Connolly
Kim Connolly
2,475 Points

https://w.trhou.se/5r6mnxmql7

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The screenshot link doesn't seem to work, but for an issue like this it would be best to facilitate analysis by making a snapshot of your workspace and posting the link to it here.

But just offhand, I would guess that it could be that the standard images have transparent backgrounds and the one you uploaded may have a solid white background. If so, you'd need to edit the image and remove the background.

If you post a snapshot link I can give you a more definitive answer.

Kim Connolly
Kim Connolly
2,475 Points

Okay I added a workspace link... I think I did it right? Let me know if it works for you and you can see what I am talking about.

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

The 2nd link to the snapshot is correct. And it looks like I guessed right, the original images have transparent backgrounds but the bike image is on solid white. And it also has proprietary watermarking!

I did a quick search and found one with a transparent background (and no watermark) that might work for you:

bicycle

Kim Connolly
Kim Connolly
2,475 Points
Kim Connolly
Kim Connolly
2,475 Points

Awesome! Thank you for your help!! :)