Encountering an issue with overlapping background images that results in a darker shadow where they intersect, causing an uneven appearance.
The problem arises with a flexible height box containing semi-transparent background images designed to create attractive borders. The box consists of 3 elements.
To view the image of the bottom left corner of the box, click here:
The individual background images can be found at these links:
Here is the code for the box:
<div class="centerbox"> <!-- Background image fixed at the bottom. -->
<div class="head"> <!-- Background image fixed at the top. -->
...
</div>
<div class="body"> <!-- Vertically repeated background image. -->
...
</div>
</div>
An evident issue is the presence of a darker shadow where the bottom and middle images overlap (red area), due to the excessive height of the bottom background image.
Reducing the size of the image is not a viable solution as it may cause a gap in the shadow when a margin-bottom is applied to the last element within the div container.
If anyone has suggestions or advice on how to resolve this problem, I would greatly appreciate it.