0
0
CSSmarkup~5 mins

Background size in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction
Background size controls how a background image fits inside an element. It helps make images look good on different screen sizes.
You want a background image to cover the entire area without stretching weirdly.
You want a background image to fit inside an element without cutting off parts.
You want to repeat a small background image in a pattern.
You want to set a specific size for a background image, like 100 pixels wide.
You want the background image to keep its original size.
Syntax
CSS
background-size: <length> | <percentage> | cover | contain | auto;
cover makes the image fill the area, cropping if needed.
contain makes the whole image visible, adding space if needed.
Examples
The background image fills the entire element, cropping parts if needed.
CSS
background-size: cover;
The background image fits inside the element without cropping, may leave empty space.
CSS
background-size: contain;
The background image is exactly 100 pixels wide and 50 pixels tall.
CSS
background-size: 100px 50px;
The background image keeps its original size.
CSS
background-size: auto;
Sample Program
This page shows four boxes with the same background image but different background sizes. Each box demonstrates how the image changes shape and size depending on the background-size property.
CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Background Size Example</title>
  <style>
    .box {
      width: 20rem;
      height: 12rem;
      border: 2px solid #333;
      margin: 1rem;
      background-image: url('https://via.placeholder.com/300x150');
      background-repeat: no-repeat;
      background-position: center;
      display: inline-block;
      vertical-align: top;
    }
    .cover {
      background-size: cover;
    }
    .contain {
      background-size: contain;
    }
    .fixed-size {
      background-size: 100px 50px;
    }
    .auto {
      background-size: auto;
    }
  </style>
</head>
<body>
  <h1>Background Size Examples</h1>
  <section>
    <article class="box cover" aria-label="Background size cover">
      <strong>cover</strong>
    </article>
    <article class="box contain" aria-label="Background size contain">
      <strong>contain</strong>
    </article>
    <article class="box fixed-size" aria-label="Background size 100px by 50px">
      <strong>100px 50px</strong>
    </article>
    <article class="box auto" aria-label="Background size auto">
      <strong>auto</strong>
    </article>
  </section>
</body>
</html>
OutputSuccess
Important Notes
Use background-repeat: no-repeat; to avoid repeating the image when using background-size.
The cover option is great for full-screen backgrounds.
The contain option is useful when you want the whole image visible without cropping.
Summary
Background size controls how a background image fits inside an element.
cover fills the area, possibly cropping the image.
contain fits the whole image inside, possibly leaving space.