I have a wrapper that has a header, content and footer.

The body is an image, and the wrapper is also an image. The header and footer background are transparent, making the wrapper background image visible. Still, I need to somehow cut the wrapper background in the content div so the body background image is visible.

I tried it with box-shadow and other hacks but they won’t work since the body and wrapper backgrounds are both images.

I also tried a workaround to toggle the wrapper background image off and add background images to the header and footer separately but then the images were misaligned.

Since the content background image is togglable. I use content something like tabs so sometimes the background should be transparent and sometimes it should be the wrapper background image.

To clarify body is not an actual image but rather transparent since it is all in CEF so when the body is transparent the game is shown.

example image