image focal point

Why Does a Background Image Jump When the Screen Resizes?

by

Background image jumps on resize when a hero, card, or section uses a background image that keeps changing its crop, position, height, or focal point as the viewport changes.

CSS background image fix

Why does a background image jump when the screen resizes?

background image jumps on resize is usually not a random browser glitch. The browser is recalculating how the image should fit the box. If the section width changes, the height changes, the focal point is still centered, or background-size:cover is forced to crop a new part of the image, the image can appear to jump while everything else on the page feels stable.

This is different from a background that simply fails to cover a section. Here, the image may cover the section, but the visible part of the image moves in a way that feels broken. A face may slide out of frame, a product may jump to the edge, or a hero banner may suddenly show a different crop at tablet width.

Cover crop behavior Focal point fix Stable hero height Mobile parallax risk Real image markup Premium patterns

Quick diagnosis

If the image seems to slide, re-crop, or reveal a totally different area while resizing, inspect the section height, background-size, and background-position first.

The crop is changing

cover fills the box by cropping whatever does not fit.

The focal point is wrong

center center may not protect the important part of the image.

The height is unstable

A hero that changes height can make the background feel like it jumped.

Mobile needs a different crop

Desktop and mobile often need different background positions.

Parallax can repaint badly

Fixed backgrounds and transforms often feel jumpy on mobile.

The fix is intent

Give the image a stable box, focal point, and breakpoint strategy.

Test the focal point before changing the whole layout

Resize the page slowly and watch the most important part of the background image. If that subject moves out of frame while the container still looks correct, the layout may not be the problem. The image needs a better focal point or a different mobile crop.

Related: Try this in the FrontFixer Live Inspector.

Open Live Inspector →

What the bug looks like

The image covers the box, but the visible subject moves or disappears during resize.

Why it happens

The box ratio changes and cover recalculates which part gets cropped.

What usually fixes it

Use a stable shell, intentional focal point, and breakpoint-specific positioning.

Why background images move even when the CSS looks simple

A CSS background image does not behave like normal content. It does not reserve its own space, it does not tell the parent how tall it wants to be, and it does not protect the important subject in the photo. It only paints inside whatever box the CSS gives it.

That is why background-size:cover is powerful but dangerous. It makes sure the image covers the entire area, but it may crop the top, bottom, left, or right depending on the box shape. When the box changes from wide desktop to narrow mobile, the browser chooses a new crop. The change can look like a jump.

The fix is not to avoid background images forever. The fix is to decide what must stay stable: the section height, the subject, the image position, or the mobile art direction. Once that decision is clear, the CSS becomes predictable.

cover crops

It fills the area by cutting off whatever does not fit.

Position matters

A useful focal point is usually better than plain center.

Height matters

A changing hero height changes the visible crop.

Mobile may need its own image

Sometimes one desktop background cannot serve every screen.

Error 1

The focal point is left at center center

The most common cause is using the default center crop for every screen. The image technically covers the section, but the important subject is not always in the center. When the viewport gets narrower, the browser crops a different area and the subject appears to jump.

Broken code

Generic center crop
CSSCopy CodeExpand
.hero { min-height: 520px; background-image: url(“hero.jpg”); background-size: cover; background-position: center; }

Broken visual result

Subject drifts right
The background fills the hero, but the important part moves as the box ratio changes.
The section is covered, but the focal point is not protected.

Correct code

Breakpoint focal point
CSSCopy CodeExpand
.hero { min-height: clamp(360px, 58vw, 560px); background-image: url(“hero.jpg”); background-size: cover; background-position: 42% center; } @media (max-width: 640px) { .hero { background-position: 35% center; } }

Fixed visual result

Subject stays framed
The crop still changes, but it changes around the subject instead of against it.
Use a real focal point instead of trusting center forever.
Error 2

The hero height changes too aggressively

A background can jump because the container height changes at the same time as the width. This often happens with fixed desktop heights, aggressive vh values, or mobile headers that leave a different amount of space. The image is recalculated inside a new shape.

Broken code

Hard hero height
CSSCopy CodeExpand
.hero { height: 720px; background-size: cover; background-position: center top; } @media (max-width: 600px) { .hero { height: 100vh; } }

Broken visual result

Height forces new crop
tall mobile crop
height jumps from desktop banner to huge mobile block
The resize changes both width and height, so the background appears to jump.
A new container shape means a new background crop.

Correct code

Controlled height range
CSSCopy CodeExpand
.hero { min-height: clamp(360px, 62svh, 620px); background-size: cover; background-position: center 38%; } @media (max-width: 600px) { .hero { min-height: 420px; } }

Fixed visual result

Height stays predictable
stable hero shape
height changes inside a controlled range
The hero can still be responsive without swinging between extreme shapes.
Use a controlled height range when the image crop matters.
Error 3

A parallax or fixed background repaints during resize

Parallax backgrounds, background-attachment:fixed, and transformed parent sections can create visual jumps when the browser recalculates the page. This is especially risky on mobile, where fixed backgrounds often behave differently or get disabled by the browser.

Broken code

Fixed background everywhere
CSSCopy CodeExpand
.promo { background-image: url(“scene.jpg”); background-size: cover; background-position: center; background-attachment: fixed; }

Broken visual result

Parallax shifts
fixed background drifts
content stays elsewhere
layers are visibly misaligned after resize
The background and content feel like separate pieces that are no longer aligned.
Do not force fixed backgrounds as the mobile default.

Correct code

Mobile-safe background
CSSCopy CodeExpand
.promo { background-image: url(“scene.jpg”); background-size: cover; background-position: center; } @media (min-width: 900px) { .promo { background-attachment: fixed; } }

Fixed visual result

Mobile stays stable
normal mobile background
content aligned
parallax only returns on safe desktop widths
The mobile version keeps the background attached to the section.
Save parallax behavior for layouts where it is reliable.
Error 4

The image is meaningful but treated as decoration

If the image contains a product, person, screenshot, text, UI preview, or anything the user must actually see, a CSS background can be the wrong tool. Background images are great for decoration. Meaningful images often need an actual media element with object-fit, object-position, and a predictable wrapper.

Broken code

Important image as background
CSSCopy CodeExpand
.product-hero { background-image: url(“product.jpg”); background-size: cover; background-position: center; }

Broken visual result

Product gets cropped
product half outside
background has no content-safe crop rules
The user needs the image, but the CSS treats it as decoration.
A meaningful image should not disappear because a section ratio changed.

Correct code

Image shell owns crop
HTML/CSSCopy CodeExpand
<div class=”product-media”> <img src=”product.jpg” alt=”Product preview”> </div> .product-media { aspect-ratio: 16 / 9; overflow: hidden; } .product-media img { width: 100%; height: 100%; object-fit: cover; object-position: 42% center; }

Fixed visual result

Subject stays visible
full product visible inside media shell
image has object-fit and object-position rules
The wrapper controls the shape and the image controls its own crop.
Use real media when the image carries meaning.
Premium pattern

Three production-minded background image patterns

Premium background image systems do not rely on one universal center center rule. They define a stable image shell, use focal-point tokens, and switch to real media when the image is too important to behave like decoration.

Premium code example 1

Focal point tokens
CSSCopy CodeExpand
.hero { –focus-x: 42%; –focus-y: 38%; min-height: clamp(360px, 60svh, 640px); background-image: url(“hero-wide.jpg”); background-size: cover; background-position: var(–focus-x) var(–focus-y); } @media (max-width: 640px) { .hero { –focus-x: 34%; –focus-y: 45%; } }

Premium visual result 1

Focal point system
focal
point
Hero crop stays intentionalThe subject stays inside the designed safe zone on desktop and mobile.
desktop
42% / 38% mobile
34% / 45% stable height
range subject
protected
Pattern 1 is ideal for hero sections, banners, and marketing headers.

Premium code example 2

Picture instead of background
HTML/CSSCopy CodeExpand
<picture class=”feature-media”> <source media=”(max-width: 640px)” srcset=”feature-mobile.jpg”> <img src=”feature-wide.jpg” alt=”Feature preview”> </picture> .feature-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; } .feature-media img { width: 100%; height: 100%; object-fit: cover; }

Premium visual result 2

Art direction wins
desktop wide source keeps context
mobile crop protects the subject
wide art→mobile art
The source changes intentionally instead of hoping one background crop works everywhere.
Pattern 2 is ideal when the image contains people, products, text, or UI details.

Premium code example 3

Stable overlay hero
CSSCopy CodeExpand
.hero { position: relative; isolation: isolate; min-height: clamp(420px, 68svh, 720px); display: grid; align-items: end; padding: clamp(24px, 5vw, 72px); } .hero::before { content: “”; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent, rgba(0,0,0,.68)), url(“hero.jpg”) 40% center / cover; }

Premium visual result 3

Content and image separated
image layergradient layercontent layer

Overlay stays readable

The background owns the crop. The content owns the message. They do not fight each other.

CTAsafe croppremium hero
Pattern 3 is ideal for premium landing pages where the background and text both need control.

Fast practical rule

Use background-size:cover only after deciding the image focal point and the section height. If the important part of the image must never disappear, use a real image or picture element instead of treating the visual as decoration.

Debug checklist

  • Inspect the element using the background image.
  • Check whether background-size:cover is cropping the image.
  • Change background-position in DevTools and watch the focal point.
  • Resize slowly and note the exact width where the jump happens.
  • Check whether the section height changes at the same breakpoint.
  • Avoid background-attachment:fixed as a mobile default.
  • Use a mobile-specific image if one crop cannot serve all screens.
  • Use real media when the image contains meaningful content.

Best first move

Try a different background-position before rewriting the layout.

Most common cause

The image focal point is not centered even though the CSS says center.

Most sneaky cause

The container height changes and the crop changes with it.

Better mindset

Background images need art direction, not just coverage.

Why this does not cannibalize other image fixes

This fix targets a specific behavior: a background image visually jumping, sliding, or changing crop during resize. The related background-cover fix is about a section not being fully covered. The mobile image crop fix is about normal image elements being cropped wrong. This page is focused on CSS background positioning and resize behavior.

Final takeaway

background image jumps on resize because the browser is recalculating how a background should fill a changing box. The image may still cover the section, but the visible crop can move when width, height, focal point, or attachment behavior changes.

Stabilize the box, choose a real focal point, disable risky parallax on mobile, and use real image markup when the visual is important content. That turns a jumpy background into an intentional responsive image system.

Want more fixes like this?

Browse more CSS background, responsive design, image sizing, and mobile layout debugging guides in the FrontFixer library.

CSS Fixes All Fixes

Why Is My Image Cropped Wrong on Mobile?

by

Image cropped wrong on mobile problems usually happen when a desktop image is forced into a mobile container with object-fit:cover, a fixed height, the wrong object-position, or a background image with the wrong focal point.

Mobile Image Crop Fix

Why is my image cropped wrong on mobile?

An image cropped wrong on mobile can cut off a face, product, logo, headline area, or important detail. The image is not necessarily broken. The browser is usually doing exactly what the CSS asked: filling a narrow mobile box with cover. The fix is to control the image ratio, focal point, object position, and mobile crop rules instead of letting the browser guess.

Responsive Fixes CSS Fixes
  • object-fit
  • object-position
  • aspect-ratio
  • background-position

What the bug looks like

The subject disappears, a face is cut off, a product is too zoomed in, or only the wrong side of the image is visible.

Why it happens

The mobile container has a different shape than the image, so the browser crops the image to fill the box.

What usually fixes it

Use a better aspect ratio, adjust object-position, avoid tiny fixed heights, or provide a mobile-specific crop.

Error 1

object-fit:cover is cropping the wrong part

object-fit:cover is not bad. It is often the right choice for cards and hero images. But on mobile, a narrow container can crop the subject if the focal point stays in the wrong place.

Broken code

Default center crop 
.hero-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center center;
}

Broken visual result

Important area is cut
bad crop
Mobile hero

The crop fills the box but cuts away the focal point.

Cover fills the container, but the default center crop does not protect the subject.

Correct code

Control focal point 
.hero-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 28%;
}

Fixed visual result

Subject stays visible
focal point
Mobile hero

The crop still fills the box, but the important area stays in view.

object-position tells the browser which part of the image should stay visible.
Error 2

The mobile image container is too short

A short fixed-height container makes the crop more aggressive. If the image has important vertical detail, a tiny mobile height can remove the top, bottom, or center of the subject.

Broken code

Fixed short height 
@media (max-width: 640px) {
  .image-wrap {
    height: 120px;
    overflow: hidden;
  }

  .image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

Broken visual result

Container forces harsh crop
too short
Article card

The image box is too short for the visual content.

A short mobile container can crop too much even when the image width is responsive.

Correct code

Use aspect ratio 
.image-wrap {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Fixed visual result

Crop has room
aspect ratio
Article card

The image keeps a consistent shape without being squeezed flat.

aspect-ratio is usually safer than a tiny fixed height for responsive images.
Error 3

background-size:cover uses the wrong background position

Background images have the same crop problem as normal images. If you use background-size:cover without adjusting background-position, mobile can show the wrong part of the image.

Broken code

Background centered blindly 
.hero {
  background-image: url(hero.jpg);
  background-size: cover;
  background-position: center;
}

Broken visual result

Wrong part of background
wrong focus
Background hero

The background fills the section, but the subject is not where mobile needs it.

Background cover needs a mobile-aware focal point, not just center center.

Correct code

Mobile background focal point 
.hero {
  background-image: url(hero.jpg);
  background-size: cover;
  background-position: center top;
}

@media (max-width: 640px) {
  .hero {
    background-position: 35% center;
  }
}

Fixed visual result

Background focuses correctly
positioned
Background hero

The mobile background position keeps the important part visible.

For background images, background-position is your focal point control.
Error 4

You need a mobile-specific crop, not just CSS positioning

Sometimes the desktop image is simply the wrong shape for mobile. If the important content is spread across a wide image, no amount of object-position will make every detail fit in a narrow crop.

Broken code

One image for every screen 
<img
  class="hero-image"
  src="desktop-wide-image.jpg"
  alt="Product preview"
>

Broken visual result

Desktop crop does not translate
wrong source
Product image

The desktop composition is too wide for mobile.

One desktop image may not be enough when mobile needs a different composition.

Correct code

Use picture source 
<picture>
  <source
    media="(max-width: 640px)"
    srcset="mobile-crop.jpg"
  >
  <img
    class="hero-image"
    src="desktop-wide-image.jpg"
    alt="Product preview"
  >
</picture>

Fixed visual result

Mobile gets the right crop
mobile source
Product image

The mobile version is composed for the mobile container.

<picture> lets you serve a mobile crop when CSS alone cannot protect the subject.
Premium pattern

A production-minded responsive image crop pattern

A reliable responsive image pattern controls the container ratio, image fitting behavior, focal point, and optional mobile source. It does not depend on one desktop crop magically working everywhere.

Premium code

Safe responsive image crop 
<picture class="media">
  <source
    media="(max-width: 640px)"
    srcset="image-mobile.jpg"
  >
  <img
    class="media__image"
    src="image-desktop.jpg"
    alt="Descriptive image alt text"
  >
</picture>
.media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 16 / 9;
}

.media__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--image-focus, center);
}

@media (max-width: 640px) {
  .media {
    aspect-ratio: 4 / 3;
  }

  .media__image {
    object-position: var(--image-focus-mobile, center 30%);
  }
}

Premium visual result

Responsive crop with focal control
premium
Premium media block

The crop changes safely on mobile without losing the important subject.

Premium image CSS does not avoid cropping forever. It makes the crop intentional.

Fast practical rule

If an image is cropped wrong on mobile, do not remove object-fit:cover immediately. First adjust the container ratio and object-position. If the desktop composition still fails, use a mobile-specific crop with <picture>.

Debug checklist

  • Inspect the image container height, width, and aspect ratio on mobile.
  • Check whether the image uses object-fit:cover or a background with background-size:cover.
  • Adjust object-position to protect the image’s focal point.
  • For background images, adjust background-position at mobile breakpoints.
  • Replace tiny fixed heights with aspect-ratio where possible.
  • Use object-fit:contain only when showing the full image matters more than filling the box.
  • Use <picture> when mobile needs a different crop or composition.
  • Test real images, not only placeholder rectangles, because focal points change the result.
Best first move Change object-position in DevTools and see whether the important subject comes back.
Most common cause A desktop image is being forced into a narrow mobile container with cover.
Most sneaky cause A background image has the right size but the wrong mobile background position.
Better mindset Cropping is not always a bug. Uncontrolled cropping is the bug.

Related fixes that can help

Mobile image cropping often connects to responsive layout, container width, grid overflow, page width, and mobile horizontal scroll.

Fix responsive design not working If the image crop only breaks after a mobile breakpoint. Read this fix
Fix container width problems If the image wrapper is the wrong size before the image even loads. Read this fix
Why is my grid column overflowing? If the image is inside a CSS Grid column and affects the layout. Read this fix
Fix CSS Grid Breaking on Mobile If image cards break when the grid stacks or changes columns. Read this fix
Why is my page wider than the screen? If the image crop problem also creates horizontal overflow. Read this fix
Horizontal Scroll on Mobile? If images or wrappers are creating sideways scrolling. Read this fix

Final takeaway

An image cropped wrong on mobile is usually a responsive composition problem. The image is being forced into a mobile shape, and the browser has to decide what to cut.

Control the crop intentionally. Use a safer aspect ratio, choose the right object-position or background-position, and use a mobile-specific crop when the desktop image cannot work on a narrow screen.

Want more fixes like this?

Browse more image, mobile, and responsive CSS debugging guides in the FrontFixer library.

Responsive Fixes All Fixes