title: Why putting image as a background to div doesn't fit exactly inside the div instead of stretching?
body: <p>I am trying to set background of the div as an image and it is set but the image is not appearing correctly i.e. it goes all the way down instead of being exactly set inside the div. How do I do this?</p>
  <pre><code> &lt;div class=&quot;swiper-slide swiper-latest-products mat-elevation-z2&quot;
                 style=&quot;background-image: url('${headerImagePath}'); background-size:contain;
                 height: 20%;
                 width: 100%;
                 padding-top: 66,64%;&quot;
                 onclick=&quot;window.loadDataClicked(${viewSubjectData});&quot;&gt;
                &lt;span class=&quot;sectionRole-name&quot;&gt;${
                  subject.SectionRole.NameAr
                }&lt;/span&gt;
                &lt;div class=&quot;top-products-image ${
                  subject.SectionRole.Id == SectionRoleType.Readings
                    ? &quot;qarah-with-catgory-image&quot;
                    : &quot;&quot;
                }&quot;&gt;&lt;/div&gt;
                    &lt;div class=&quot;top-products-title-container&quot;&gt;
                        &lt;div class=&quot;top-products-title float-right&quot;&gt;${title}&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
  </code></pre>
  <p>I tried setting background size and no-repeat but didn't work. How do I make it appear exactly fit inside the div?</p>