Background image within slick slider

Question

<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 </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 </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>

Above I have a content box which contains a slider. The content box has an aspect ratio of 1/.52. My goal is to have a different background image on each slide, with content overlaid on the image. The background images also have to be accessed via the web so setting a background-image css property doesn't seem to work. Each div within the #largeCarouselContent is a slide. The current solution doesn't work because the canvas1.jpeg spans over all slides. I'm stumped, any ideas?

Answer 1

If I understood you well, you want a background image, right? If so, why don't you use a CSS background image instead of an inline image? And use a background-size: cover; for each slide. Thus, no matter what aspect ratio your image has, it'll fill up the entire container.

.homepage-item {
    background: url("~/Content/images/Canvas1.jpg") no-repeat center / cover;
    box-sizing: border-box;
    padding-bottom: 52%;
    position: relative;
}