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

CSS

Parvez Noor
PLUS
Parvez Noor
Courses Plus Student 15,917 Points
Posted by Parvez Noor
Parvez Noor
Courses Plus Student 15,917 Points

How to make the background of your logo transparent

Hi guys,

I'm creating a website for practice and I'm trying to put a logo on my website just like treehouse has their in the top left hand corner of the website (and when you lessen the width of the browser, it moves to the center of the header).

I have an image which I have created with a transparent background on adobe. I'm now trying to upload that to my page but it keeps coming up with a white background.

Can anyone help with the code?

So far all I've done is, for the html:

<div class="container"> <img src="img/arrowhead.jpg" alt="arrow button" title="click to go to home page"/> </div>

and for the css:

.container { background: transparent; }

1 Answer

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

The background may have been transparent while you were editing it, but when you wrote it out it was replaced with solid white (the default) because of the file format.

Jpeg does not support transparent regions, so you'll need to store your image in a different format that does. Some of the more popular ones that do are PNG and GIF.