I am looking for a way to divide an image into separate "portions" without having to load the image multiple times to save bandwidth. In this case, I want to split the image into 4 quadrants, but ideally, I would like a scalable solution.
https://i.sstatic.net/rhy46.png
It's important to note that I don't just want a white window frame overlay; I want each quadrant to seamlessly begin where the previous one left off.
I have created a fiddle that achieves what I want, but it still requires loading the image for all 4 quadrants. https://jsfiddle.net/gm4os1Ld/
#first{
position:absolute;
clip: rect(0, 217px, 159px, 0);
}
#second{
position:absolute;
left: 20px;
clip: rect(0px,435px,159px,217px);
}
#third{
position:absolute;
top: 20px;
clip: rect(159px, 217px, 318px, 0);
}
#fourth{
position:absolute;
left: 20px;
top: 20px;
clip: rect(159px,435px,318px,217px);
}
Is there a way to achieve this with only one image load? I'm open to CSS or jQuery solutions.