The background-size property controls how large a background image appears inside an element. It is essential for responsive hero banners, logos, and repeating patterns.
Fill the container.
Show the full image.
Natural image size.
Exact width and height.
Relative to the element.
Pair with no-repeat.
The background-size CSS property sets the dimensions of a background image. You can scale backgrounds to fill a container, fit entirely inside it, or set exact widths and heights.
This property is widely used in responsive design so backgrounds look good on phones, tablets, and desktops without stretching awkwardly or leaving unwanted empty space.
For hero sections, the most common combination is background-size: cover; with background-repeat: no-repeat; and background-position: center;.
Apply background-size after setting a background-image:
selector {
background-size: <bg-size>#;
}.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}auto, which keeps the image’s natural size.cover and contain preserve aspect ratio while scaling.background-repeat: no-repeat for single-image layouts.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | Background image dimensions |
| Inherited | No |
| Animatable | Yes |
| Common use | Hero banners, logos, responsive photos, pattern tiles |
The initial value of background-size is auto. That keeps each dimension at the background image’s natural size unless another value overrides it.
These are the most common ways to size background images with background-size.
| Value | Example | Meaning |
|---|---|---|
auto | background-size: auto; | Keeps the image at its natural size |
cover | background-size: cover; | Scales to fill the container; may crop edges |
contain | background-size: contain; | Scales to fit entirely inside the container |
| Length | background-size: 100px 200px; | Sets exact width and height |
| Percentage | background-size: 50% 50%; | Sizes relative to the element dimensions |
coverFills the container completely while preserving aspect ratio.
Common for hero banners.
containShows the entire background without cropping.
Useful for logos.
autoKeeps the image at its intrinsic dimensions.
Default sizing behavior.
40px 40pxSets an exact tile size in pixels or other length units.
Great for patterns.
50% 50%Scales relative to the element width and height.
Responsive sizing.
cover vs contain| Value | Behavior | Best for |
|---|---|---|
cover | Fills the entire container; may crop parts of the image | Full-width hero sections and banner backgrounds |
contain | Fits the whole image inside the container; may leave empty space | Logos, product images, and icons that must stay fully visible |
auto | Uses the image’s natural dimensions | Small decorative assets at their original size |
| Length / % | Sets explicit width and height values | Pattern tiles and precise layout control |
The same gradient background with four different size values:
All panels use background-repeat: no-repeat; and background-position: center;.
Try background-size with cover, contain, pixel dimensions, and a three-value comparison.
Use cover and contain for responsive layouts that preserve aspect ratio.
Scale a background to completely fill a container, even if parts are cropped.
.hero {
background-image: url("photo.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}cover scales the image until the container is filled. Excess parts may be cropped to maintain aspect ratio.
Keep the entire background visible inside the element without cropping.
.logo-panel {
background-image: url("logo.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}contain scales the image until it fits entirely inside the box. Empty space may appear on the sides or top and bottom.
Use pixel and percentage values when you need precise control over background dimensions.
Set an exact background width and height for icons or pattern tiles.
.tile {
background-image: url("dot.svg");
background-repeat: no-repeat;
background-size: 80px 80px;
background-position: center;
}Two length values set width and height independently. This is useful for pattern tiles and fixed-size decorative assets.
See how the three most common sizing modes behave on the same background.
.auto { background-size: auto; }
.cover { background-size: cover; }
.contain { background-size: contain; }auto keeps natural dimensions, cover fills the box, and contain shows the full background without cropping.
background-size WorksSet a photo, logo, or pattern with background-image.
Use cover, contain, auto, or explicit dimensions.
Pair with background-repeat: no-repeat and background-position for polished layouts.
Backgrounds scale correctly across screen sizes without awkward stretching.
background-size is supported in all modern browsers. Basic keywords and length values work back to IE9.
Chrome, Firefox, Safari, Edge, and Opera all support cover, contain, and custom dimensions.
For very old browsers, provide a fixed height container and test that cover and contain behave as expected.
background-size with vendor prefixes in legacy codebasesBottom line: Use background-size freely in modern projects for responsive background images.
The background-size property gives you precise control over how large background images appear. Whether you need a full-bleed hero with cover or a fully visible logo with contain, this property is a core tool for responsive web design.
Combine it with background-repeat, background-position, and background-image to build polished background layouts on any screen size.
cover for hero banners that should fill the containercontain for logos and images that must stay fully visiblebackground-repeat: no-repeat for single imagescover when every part of the image must remain visiblecover and contain when choosing a layoutbackground-sizeUse these points when sizing background images.
May crop edges.
HeroShows full image.
LogoNatural size.
DefaultWidth and height.
SyntaxSingle-image layouts.
PairOpen the HTML editor, try cover and contain, and experiment with background-size instantly.
5 people found this page helpful