Background image not covering full section problems usually happen when background-size:cover is missing, the section has no height, the background is applied to the wrong element, or a shorthand rule resets the background size.
Background Image Fix
Why is my background image not covering the full section?
A background image not covering full section can leave blank space, repeat as a tiny tile, stop halfway down the hero, or only cover the content area instead of the whole section. The fix usually comes down to four things: the section needs real height, the image needs background-size:cover, the background must be on the right element, and later CSS must not reset your background settings.
- background-size
- section height
- background-position
- mobile hero
What the bug looks like
The image repeats, leaves blank space, covers only the top, does not reach the bottom, or only covers a small inner block.
Why it happens
A background image covers the element it is applied to, not the section you imagined in the design.
What usually fixes it
Apply the background to the real section, give the section height, and use background-size:cover with safe position and repeat values.
background-size:cover is missing
By default, a background image does not automatically stretch to cover the section. If the image is smaller than the section, it can repeat. If it is a different ratio, it may leave empty space unless you tell it how to fit.
Broken code
Natural size / repeat.hero {
background-image: url(hero.jpg);
background-position: center;
}Broken visual result
Correct code
Cover the section.hero {
background-image: url(hero.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Fixed visual result
cover fills the section, while no-repeat prevents tiling.The section has no real height
A background image only paints inside the element’s box. If the section has little content and no height or padding, the background may technically cover the section, but the section itself is too short.
Broken code
Short section.hero {
background-image: url(hero.jpg);
background-size: cover;
background-position: center;
}Broken visual result
Correct code
Give section height.hero {
min-height: 70vh;
padding: 96px 24px;
background-image: url(hero.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Fixed visual result
min-height and padding to create the section area the image should cover.The background is applied to the wrong element
A common layout mistake is applying the background to an inner content wrapper instead of the full section. The image then covers only the wrapper, not the whole hero or section area.
Broken code
Background on inner wrapper.hero {
min-height: 70vh;
}
.hero-content {
background-image: url(hero.jpg);
background-size: cover;
}Broken visual result
Correct code
Background on section.hero {
min-height: 70vh;
background-image: url(hero.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.hero-content {
max-width: 720px;
}Fixed visual result
A later background shorthand resets your cover settings
The background shorthand can reset multiple background properties. If you set background-size:cover first, then later use background:, your cover setting can disappear.
Broken code
Shorthand reset.hero {
background-image: url(hero.jpg);
background-size: cover;
}
.hero.is-dark {
background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(hero.jpg);
}Broken visual result
Correct code
Keep size after shorthand.hero.is-dark {
background:
linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
url(hero.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}Fixed visual result
background: shorthand, set background-size, position, and repeat again.A production-minded full-section background pattern
A reliable hero background pattern puts the image on the real section, creates a real section area, uses a layered overlay, and repeats the important background rules in one place.
Premium code
Full-section hero background.hero {
min-height: min(760px, 82vh);
padding: clamp(72px, 10vw, 140px) 24px;
display: grid;
place-items: center;
color: white;
background:
linear-gradient(rgba(15, 23, 42, .58), rgba(15, 23, 42, .58)),
url("hero.jpg");
background-size: cover;
background-position: var(--hero-position, center);
background-repeat: no-repeat;
}
@media (max-width: 640px) {
.hero {
min-height: 70vh;
background-position: var(--hero-position-mobile, center);
}
}Premium visual result
Fast practical rule
If a background image is not covering the full section, inspect the section box first. Then set background-size:cover, background-position:center, background-repeat:no-repeat, and make sure no later background: shorthand resets those values.
Debug checklist
- Inspect the section and confirm it has the height and width you expect.
- Make sure the background image is applied to the outer section, not only an inner wrapper.
- Set
background-size:coverwhen the image should fill the whole section. - Set
background-repeat:no-repeatto avoid tiling. - Use
background-positionto control the focal point. - Check whether a later
background:shorthand reset your size, repeat, or position. - Avoid
background-size:containwhen the goal is full-section coverage. - Use mobile-specific background positions when the subject shifts on narrow screens.
background-size:cover is missing or got reset by a later shorthand.
Final takeaway
A background image not covering full section is usually not an image problem. It is usually a section sizing, background sizing, wrong element, or CSS reset problem.
Put the background on the real section, give that section enough height, use background-size:cover, prevent repeat, and keep your background shorthand from resetting the important rules.
