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

Design

Andrew Finn
Andrew Finn
2,193 Points
Posted by Andrew Finn
Andrew Finn
2,193 Points

Editing Website Logo

I am wanting to edit a website logo that is a hexagonal shape, in such a way that it will appear floating on the header image of the site. With the header image remaining fixed, and all of the image visible, apart from the hexagon shape of the logo.

Do I just need to crop the parent logo image to leave only the hexagonal outline?

matching the background colour of the logo image to the header image won't really work as the header Image is a photograph.

Im not sure how to approach this, any advice would be appreciated, thanks!

1 Answer

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

You don't need to change your images, assuming the hexagonal one uses a format that supports transparency, and the area outside the hexagon is designated transparent.

Placement of the hexagonal image over the original can be done with absolute positioning (via CSS properties) relative to the original image.

Andrew Finn
Andrew Finn
2,193 Points
Andrew Finn
Andrew Finn
2,193 Points

Hey Steven, thanks for the response. The area around the original hexagonal image is an off-white...as it is a .pdf file I don't really know how I would go about making that transparent. Unless you mean using CSS code to lay a hexagon over the image?

I found this code on CSS-tricks:

logo {

width: 100px;
height: 55px;
background: red;
position: relative;

}

logo:before {

content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;

}

logo:after {

content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solids red;

}

but I haven't been able to get the two to match up or become transparent.

Any advice?