I’m trying to create this look:
http://cl.ly/16003k2J0z2T
I’ve got this working so far:
http://codepen.io/PhilippeGauthier/pen/wMENPa
The goal is to have that logo in a container that matches the rest of the page’s content and the transparent portion mimic the full background image. The issue is that using clip-path basically clips at the top left corner of the img / div. I could move everything over into the container but then the context of the background image would be the size of the container, not the full width of the page.
I’m not sure if using clip-path is the right way of going about this. I wish I could just create the rectangular logo div and a svg sitting within it that’s transparent and would knock out what’s behind it exposing the background image but obviously that doesn’t work since it just reveals the opaque div behind it.
Any help about how to think about this would be appreciated!
