I am attempting to design a layout that resembles the following:
Although I can create the letter "A" using svg or clip-path, my challenge lies in maintaining the background inside the "A" aligned with the body background. Essentially, I want the background image to respond like a cover when the window is resized, and the image inside the "A" should react accordingly.
I am struggling to come up with ideas on how to achieve this... the only solution I can think of involves using background-attachment: fixed and crafting the "A" shape with intricate CSS properties such as divs with varying width/height, border radius, translation, etc.
EDIT: Perhaps I didn't clarify the scenario well enough, so please refer to this Demo showcasing what I aim to accomplish. Notice how the grey scale spot remains consistent with the text div when resizing the browser, while the background image covers the width and height uniformly regardless of viewport size, and the image within the spot adjusts to represent the same spot.. My goal is to work with more complex shapes like an A or Z instead of unconventional ones.