I'm using owl carousel, and the default code I have has nice color background. but instead of the colored background, I want to use different images for each slide. I inserted an image as I have inserted the text, but the image is too big the whole thing collapses. Can you please help me with this one? Here;s the carousel code
<div class="wrapper-with-margin">
<div id="owl-demo" class="owl-carousel">
{% for import in mustSee %}
<div class="owl" style="white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; font-size:12px;">{{import.title}}
<img src="{{import.get_image_url}}" /></div>
{% endfor %}
</div>
</div>
The text gets displayed but the problem is the image, the image needs to be the background of the div tag. But thing is I'm using for loop to display different images for each slide, I can't directly change background like I would do in css. And In css,
#owl-demo .owl-item > div{
background : #42bdc2;
text-align: center;
padding:50px 0px;
margin:3px;
color: white;
font-size:32px;
border:1px white;
}
Instead of
background : #42bdc2;
I want this to be <img src="{{import.get_image_url}}" /> of course, because I'm using for loop, I need to consider that too as well. how do I replace colored background with this image?