Controlling Background Image Size with CSS `background-size`: `cover`, `contain`, and Custom Dimensions

Learn how to effectively control the size and scaling of background images using CSS's `background-size` property. This tutorial explains different `background-size` values (`cover`, `contain`, and custom dimensions), demonstrates their effects, and provides practical examples for creating visually appealing and responsive web designs.

Controlling Background Image Size with CSS `background-size`

Introduction to `background-size`

The CSS `background-size` property controls the size of the background image displayed within an element. It allows you to scale the image to fit the container, maintain its aspect ratio, or set specific dimensions. This property offers flexibility in adapting background images to various container sizes and designs.

`background-size` Property Values

The `background-size` property accepts several types of values:

1. Keyword Values: `cover` and `contain`

• `cover`: Scales the image to cover the entire element, maintaining aspect ratio but potentially cropping parts of the image that don't fit.
• `contain`: Scales the image to fit entirely within the element, maintaining aspect ratio but potentially leaving some space around the image.

The following examples demonstrate `cover` and `contain`. You would need a corresponding HTML element with a background image set to see the effects. The CSS would apply `background-size` to the container element.

Example 1: `background-size: cover;`

The image is scaled to completely cover the container, potentially cropping some of the image.

Example 2: `background-size: contain;`

The image is scaled to fit within the container without cropping, maintaining aspect ratio but may have empty space.

2. Unit Values

You can set the background image size using length units (pixels, ems, etc.) or percentages. This allows for precise control over the background image's dimensions.

.element {
  background-size: 50%; /* 50% of the container width and height */
  background-size: 200px; /* 200px wide and auto height */
  background-size: 30vw; /* 30% of the viewport width */
}

3. Global Values: `inherit`, `initial`, `unset`

• `inherit`: The background size inherits from the parent element.
• `initial`: Resets the property to its default value (auto).
• `unset`: Resets to either the inherited value or the initial value (auto) depending on whether it inherits or not.

The following examples demonstrate how `inherit`, `initial`, and `unset` affect background image sizing. These examples need a corresponding HTML structure to show the effects.

Example 3: `background-size: inherit;`

The background image inherits its size from its parent element.

Example 4: `background-size: initial;`

The background image is displayed in its original size.

Example 5: `background-size: unset;`

The background size is determined by inheritance or defaults to `auto`.

4. One-Value and Two-Value Syntax

• One Value: Specifies either width or height; the other dimension is scaled proportionally (e.g., `background-size: 70%;` sets width to 70%, height is scaled to maintain aspect ratio).
• Two Values: Sets width and height independently (e.g., `background-size: 60% 80%;` sets width to 60% and height to 80%).

The examples below illustrate one-value and two-value approaches, demonstrating how to set background size using percentages for both width and height.

Example 6: One Value (Percentage)

Sets the width to a percentage; height is adjusted proportionally.

Example 7: Two Values (Percentages)

Sets the width and height independently using percentages.

5. Multiple Background Images

You can define multiple background images, each with its own `background-size`. The images are separated by commas.

.element {
  background-image: url('image1.jpg'), url('image2.jpg'), url('image3.jpg');
  background-size: 30%, 40%, cover;
}