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 trialAndrew Finn
2,193 PointsEditing 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
231,210 PointsYou 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
2,193 PointsAndrew Finn
2,193 PointsHey 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 {
}
logo:before {
}
logo:after {
}
but I haven't been able to get the two to match up or become transparent.
Any advice?