<section class="examples">
  <figure>
    <div class="cropped-image tiny-background-image"></div>
    <figcaption>
      <p>The Default State of a Background Image: Starting From Top Left Corner and Repeating</p>
      <p>I Use Tiny Image Here for Better Visibility</p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image centered-no-repetition"></div>
    <figcaption>
      <p>The Background Image Adjusted to Look Like the Initial <code>&lt;img&gt;</code> State</p>
      <p><code>background-position: center center</code></p>
      <p><code>background-repeat: no-repeat</code></p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image centered-no-repetition covering"></div>
    <figcaption>
      <p><code>background-size: cover</code></p>
      <p><code>background-position: left center</code></p>
      <p>Looks Like We Use the <code>object-fit: cover</code> and Add Some Alignment</p>
    </figcaption>
  </figure>
  <figure>
    <div class="cropped-image centered-no-repetition huge"></div>
    <figcaption>
      <p>The <code>background-size</code> Allows More Flexibility in Terms of Size Than the <code>object-fit</code></p>
      <p>Here We Have the 2000 px Width Image Set by the <code>background-size: 2000px auto</code></p>
    </figcaption>
  </figure>
</section>

:root {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.examples {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 1em;
}

figure {
  margin: 0;
  margin-right: 1em;
  width: min-content;
}

.cropped-image {
  width: 200px;
  height: 200px;
  border: 3px solid #bbb;
  background-image: url(https://ucarecdn.com/6476570f-a7e8-4346-9dde-e42ad30111d3/-/preview/600x400/);
}

.tiny-background-image {
  background-image: url(https://ucarecdn.com/6476570f-a7e8-4346-9dde-e42ad30111d3/-/preview/60x40/);
}

.centered-no-repetition {
  background-position: center center;
  background-repeat: no-repeat;
}

.covering {
  background-size: cover;
  background-position: left center;
}

.huge {
  background-size: 2000px auto;
}