Geek Answers Handbook

Resizing the image to fit perfectly in the slide, but the problem is replacing the css code with my image on for-loop

I use an owl carousel, and by default I have a nice colored background. but instead of a colored background, I want to use different images for each slide. I inserted the image as I inserted the text, but the image is too large, everything is destroyed. Could you help me with this? Here is 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 is displayed, but the problem is the image, the image should be the background of the div tag. But the fact is that I use a loop to display different images for each slide, I can not directly change the background, as 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

 background : #42bdc2;

, <img src="{{import.get_image_url}}" />, , for loop, . ?

+4
2

inline css background-image.

<div style="background-image: url('{{import.get_image_url}}')">

background. - , :

div {
  background: transparent url('fallback.jpg') no-repeat scroll center center / cover;
}

, .

css background ( , .owl - ):

.owl {
    background: #42bdc2 url('path/tp/fallback.jpg') no-repeat scroll center center / cover;
    text-align: center;
    padding:50px 0px;
    margin:3px;
    color: white;
    font-size:32px;
    border:1px white;
}

, ( note:, <img src=""> css, background-image, ):

<div class="owl" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:12px; background-image: url('{{import.get_image_url}}')"></div>

- background-image: url("url-goes-here");; , , url-goes-here {{import.get_image_url}}, .

+1

, :

img-src div bg

, jquery

$(".your-div").each(function(){
  var imgSrc = $(this).find(".your-img-tag").attr("src");
  $(this).css("background","url('"+imgSrc+"')");
});

img, , , img-url data-src attr div

$(".your-div").each(function(){
  $(this).css("background","url('"+$(this).attr("data-src")+"')");
});
+1

More articles:


All Articles