<div id="largeCarousel" style="display:inline-block; float:right;">
<div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;">
<div id="largeCarouselContent" style="position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:hidden; overflow-y:hidden">
<div style="color:white;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>
<div>
<div style="position:relative; top:0; left:0;">Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap Content should wrap </div>
<img src="~/Content/images/Canvas1.jpg" style="position:absolute; top:0; left:0; height:100%; width:100%;" />
</div>
<div><img src="~/Content/images/logo.jpeg" style="width:100%;" /></div>
</div>
</div>
</div>
The question pertains to a content box housing a slider with specific design requirements. I seek a way to display different background images on each slide, while overlaying text or graphics. Pushed forward requirement is the use of web-accessed background images instead of CSS properties. Each internal div within #largeCarouselContent represents a slide. The current setup presents an issue where Canvas1.jpeg spans across all slides incorrectly. Open to suggestions and ideas for resolution.