You really should have used a background image on the div rather than a real image as you don’t want messy html
The gap is because the image is stacked on the baseline and causes a small gap. Set the image to vertical-align:top or set it to display:block.
However you would be better to use an empty div and just give it a height and width and use a background image.
As a rule of thumb you should ask yourself “Is this image content or decoration”? If its decoration then it belongs in the background in the css. If the image is important to the content then it goes in the html.
So, all three splices of the image should be background for their respective div and not just the middle one? I thought since the middle one was going to be repeat-y as the content expands/contracts (content will be changed out often), that would be the only one as background.
No, all decoration images should be in the background. It keeps the page leaner and cleaner and easier to manage even if you need the odd empty div to hold an image. If you are creative you can often use existing elements without adding empty divs but does depend on the structure.