CSS background-size: cover, contain and More

background-size controls how big the image is drawn.

Value	Meaning
`auto`	The image’s natural size (the default)
`30px 20px`	A set width and height
`50%`	A share of the element’s width
`cover`	Scale to cover the whole box, cropping if needed
`contain`	Scale to fit inside the box, leaving gaps if needed

cover and contain are the two you will use constantly.

index.html

HTML

<style>
  .box {
    height: 120px;
    margin-bottom: 8px;
    border: 1px solid #999;
    background-image: linear-gradient(135deg, #d94a00, #f5b041 60%, #1a5276);
    background-repeat: no-repeat;
    color: white;
    font-size: 14px;
  }
  .sm { background-size: 80px 60px; }
  .ct { background-size: contain; background-position: center; }
  .cv { background-size: cover; }
</style>
<div class="box sm">80px 60px</div>
<div class="box ct">contain</div>
<div class="box cv">cover</div>

Gradients are treated as images, so they respond to background-size too.

Cover or contain?

cover: use for banners and hero sections, where filling the whole area matters and a little cropping is fine.
contain: use for logos and illustrations, where the whole picture must stay visible.

style.css

CSS

.hero {
  background-image: url("images/books.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

That four-line combination is the standard hero banner.