toggleclass with missing background-image

irvinn 0
Viewed 16

I have a div with an ID that I want to toggle to show additional info when clicked. However, when I run JavaScript, the images go missing.

$('div').on('click', function() {
  $(this).toggleClass('show-description');
});
.show-description p {
  height: 150px;
}

.show-description small {
  opacity: 1;
}

.first {
  background-image: url("https://via.placeholder.com/1000");
}

.price {
  float: right;
}
<div class="first">
  <p>pumpkinnie
    <small>awesome air fried pumpkin strips. </small></p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

jquery
1 Answers

use "background-size" property and set as 'contain' or 'cover' the image will not disappear since your code is correct. it may be not enough size.

make sure your image file is loaded correctly or check with this online image url: https://i.picsum.photos/id/16/200/300.jpg?hmac=k64O1qCMBhaU0Ep_qML5_xDxqLVR1MhNm8VMqgdAsxA

background-image: url('https://i.picsum.photos/id/16/200/300.jpg?hmac=k64O1qCMBhaU0Ep_qML5_xDxqLVR1MhNm8VMqgdAsxA');
background-size: contain;  //or
background-size: cover;
SandyKrish0
Related