I have a design piece to create that I initially built using three separate square div containers with independent background images. However, this method feels rigid to me as it requires chopping up and restaging a new image each time it needs to be changed, in addition to being bulky. Ideally, I would like to use a single image across each element container for easier updates and to reduce unnecessary server requests. Any suggestions for a more dynamic approach, possibly involving JavaScript? Your help or guidance in this matter would be greatly appreciated. Below is the current structure of how it is built, with a snippet of the design mockup for reference:
https://i.sstatic.net/8N6A2.png
HTML
<div class="grid-container">
<div class="grid-1 gi" style="background-image:url(image1.jpg);">Facebook</div>
<div class="grid-2 gi" style="background-image:url(image2.jpg);">Twitter</div>
<div class="grid-3 gi" style="background-image:url(image3.jpg);">Instagram</div>
</div>
CSS
.gi {
background-position: center center;
background-size: cover;
width: 32.333%;
}
.grid-1 {
margin-right: 1%;
}
.grid-2 {
margin: 0 1%;
}
.grid-3 {
margin-left: 1%;
}