Free · Fast · Privacy-first

CSS Background Position Generator

Background position determines which part of an image stays visible when the container crops it, and getting the focal point wrong throws away the most important pixels in your design.

⚡

Visual point-and-click background position setter

🔒

Supports keywords (center, top, bottom) and percentage or pixel values

✨

Live preview with image URL and container size controls

⚡

Generates the exact background-position value to copy

Cost: Free forever
Sign-up: Not required
Processing: In your browser
Privacy: Files stay local

FreeNo signupWhite-label

Add this Background Gen to your website

Drop the Background Gen into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.

Files stay 100% in the visitor's browser
Responsive — adapts to any container width
Free forever, no API key needed

Embed code

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

<iframe
  src="https://www.fixtools.io/css-tool/background-gen?embed=1"
  width="100%"
  height="780"
  frameborder="0"
  style="border:0;border-radius:16px;max-width:900px;"
  title="Background Gen by FixTools"
  loading="lazy"
  allow="clipboard-write"
></iframe>

Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.

Keywords, Percentages, and Pixel Offsets in CSS Background Position

background-position accepts several value formats and each one solves a different design problem. Keyword values are the simplest: left, center, and right for the horizontal axis, and top, center, and bottom for the vertical. Combining them gives positions like center top or right bottom. When a single keyword is given, the other axis defaults to center, which is a common source of confusion when developers expect a one-word value to anchor to a corner. Percentage values are far more precise: background-position: 30% 60% positions the image so that the 30% point of the image aligns with the 30% point of the element horizontally, and the 60% point of the image aligns with the 60% point of the element vertically. This alignment behaviour means 50% 50% perfectly centres the image rather than offsetting it by half the element width.

Pixel offset values move the image a fixed distance from the top-left origin, and they behave very differently from percentages once the container resizes. background-position: 20px 40px places the image 20px from the left edge and 40px from the top edge of the background positioning area regardless of how wide the element is. Negative values are valid and move the image off-screen in the specified direction, which is useful for sprite sheet positioning where you slide a large strip of icons to expose only one tile. Mixing units is allowed: background-position: 50% 20px centres horizontally while fixing 20px from the top. The four-value syntax from CSS Backgrounds Level 4 allows offset from a named edge: background-position: right 10px bottom 20px places the image 10px from the right and 20px from the bottom, which previously required negative percentages and fragile math.

Focal point control matters most for cover images where the container crops the image aggressively at narrow viewports. A landscape photograph of a person with the subject at the right-centre should use background-position: 75% center or background-position: right center so the person stays visible when the container is narrower than the image. A common mistake is leaving background-position at its default value of 0% 0%, which positions the top-left corner of the image at the top-left of the element. For a centred subject this works tolerably on desktop, but for off-centre subjects the subject gets cropped out of frame as soon as the container narrows past the image width on tablet or mobile. The visual position picker in this tool prevents that failure mode by letting you click directly on the subject.

Beyond static framing, background-position is the foundation of many subtle motion techniques and responsive patterns. Sprite-driven hover effects flip background-position between two coordinates to swap icons without a network request. Pseudo-parallax sections animate background-position on scroll to create depth without the full overhead of background-attachment: fixed. Pattern alignment uses background-position offsets to nudge tiled patterns so seams land on element boundaries, which makes repeating textures look intentional rather than accidental. Understanding that background-position governs all of these scenarios with one consistent alignment model is what separates developers who fight backgrounds from developers who steer them confidently.

MDN: background-position CSS Backgrounds and Borders Level 4

How to use this tool

💡

Enter an image URL and select a container aspect ratio. Click anywhere in the position grid to set the focal point, or enter exact percentage values. The preview updates to show which part of the image is visible at each position. Copy the background-position value when the framing is correct.

How It Works

Step-by-step guide to css background position generator:

1
Load an image for preview
Enter an image URL or paste from a CDN such as Unsplash, Cloudinary, or your own asset host. The tool loads the image into a preview container with sensible defaults: background-size: cover, background-repeat: no-repeat, and a centred starting position so you can immediately see how the image fills the frame before adjusting position.
2
Set the focal point
Click anywhere inside the position grid to drop the focal point, or type exact percentage or pixel values into the numeric inputs for surgical precision. The crosshair overlay marks the aligned point on the image, and the preview updates instantly so you can see which portion of the image survives the crop at the current container size.
3
Test at different container sizes
Toggle the preview container between desktop, tablet, and mobile widths or drag the handle to resize freely. Confirm the focal point stays visible across the entire breakpoint range your design supports. If a subject disappears at a specific width, nudge the position by a few percent and verify again before locking the value in.
4
Copy the background-position value
Click Copy CSS to grab the background-position declaration along with the other background properties used in the preview. Paste it into your stylesheet, design system token file, or Tailwind arbitrary value, and the live page will render exactly as the preview did with no manual translation step required.

Real-world examples

Common situations where this approach makes a real difference:

Designer framing a portrait photograph in a wide card

A designer has a portrait photograph where the subject faces right and occupies the left 40% of the image. In a wide card background, the default center position crops both sides and keeps the middle of the image, losing the subject entirely behind the card text. They set background-position: 20% center to anchor the subject inside the visible portion of the card. The tool lets them click directly on the subject in the grid, watch the framing snap into place, and verify across three card widths in seconds rather than reloading the page after each manual edit.

Developer placing a decorative icon in a button background

A developer is using a small SVG chevron as a background image in a dropdown button, placed exactly 12px from the right edge regardless of how wide the button grows. They use the four-value syntax: background-position: right 12px center to pin the icon to the right side with consistent spacing on every button length. The tool generates this syntax directly from the visual position input, confirms the icon placement matches the design spec, and lets them paste the result into the component stylesheet without manually translating between Figma offset values and CSS edge-relative syntax.

Frontend engineer fixing mobile crop for a hero image

On mobile, a hero image crops to show sky and loses the product photo at the bottom of the image, which makes the hero feel empty above the fold. The engineer changes background-position from center to center 80% to shift focus toward the lower portion of the image so the product enters the frame again. The tool previews the image at a 375px-wide container to confirm the product stays visible at mobile width, then steps through 414px and 768px to ensure the new position does not break tablet layout before the change ships to production.

Student understanding CSS background-position percentage semantics

A student expects background-position: 20% 20% to offset the image 20% from the top-left of the element, like a translate transform. The tool shows them the actual behaviour: the image shifts so its own 20% mark aligns with the element 20% mark, which is the alignment model the spec defines. This is why 50% 50% centres the image perfectly rather than offsetting it half a frame. The visual demonstration fixes a common misconception that causes misaligned backgrounds, and seeing the crosshair line up on both image and container makes the underlying math click in a way that documentation alone often does not.

Pro tips

Get better results with these expert suggestions:

Use the four-value syntax for edge-relative offsets

background-position: right 15px top 20px positions the image 15px from the right edge and 20px from the top edge directly without negative percentage workarounds. This is particularly useful for placing background icons in input fields or buttons at a fixed margin from a specific corner, independent of element size, so the icon never drifts as the component grows or shrinks across breakpoints.

Set background-position-x and background-position-y separately for animations

Separate longhand properties allow animating only one axis: transition: background-position-x 0.3s ease on a hover state slides the background horizontally while leaving vertical alignment untouched. Animating the shorthand background-position requires both values to change even if only one axis is needed, which can create jitter on the static axis when interpolating between identical values.

Combine with background-attachment: fixed for parallax-like effects

When background-attachment: fixed is active, background-position is interpreted relative to the viewport rather than the element, which changes the entire mental model. Adjusting background-position shifts where the fixed background aligns within the viewport, and that knob lets you compensate for the image appearing in an unexpected vertical position on first paint or when the section enters mid-scroll.

Use background-position: center for safe default framing

When you do not know the aspect ratio of a container at design time, such as user-generated content thumbnails or dynamic CMS cards, background-position: center combined with background-size: cover is the safest default. It keeps whatever sits at the centre of the image visible regardless of how the container is sized, and it gives content editors a predictable rule for cropping uploaded images so subjects land in the middle of the frame.

Use percentage positions for fluid containers

Pixel offsets are fixed and do not scale with the container. Use percentage values for backgrounds in fluid or responsive elements so the image position scales proportionally as the container changes width.

Match position to the image subject, not the centre

For photographs with off-centre subjects, identify the subject location as a percentage of the image dimensions and use that as the background-position value. This keeps the subject visible as the container crops the image.

Test position at the narrowest container width

At mobile viewport widths, a wide cover image is heavily cropped horizontally. Test background-position on a container set to 375px wide to confirm the focal point stays visible at the most constrained size in your design.

FAQ

Frequently asked questions

The default value of background-position is 0% 0%, which positions the top-left corner of the background image at the top-left corner of the background positioning area defined by background-origin. In most cases this aligns the image flush with the top-left corner of the padding box, and the result is that any cropping happens on the right and bottom edges as the container narrows. Overriding the default with center or 50% 50% moves the image so its centre aligns with the element centre, which is the most common choice for cover backgrounds because cropping then happens symmetrically on all four sides.

CSS background-position percentages use an alignment system rather than a simple offset, and that distinction trips up nearly every developer the first time they meet it. The percentage value refers to the same point on both the element and the image. background-position: 30% 50% aligns the point 30% from the left of the image with the point 30% from the left of the element, and the 50% vertical points align as well. This means 0% 0% aligns the image top-left with the element top-left, and 100% 100% aligns the image bottom-right with the element bottom-right. The benefit is that the alignment is preserved as the container resizes, since both anchor points scale together.

Yes. background-position is animatable using CSS transitions and keyframe animations, and it is one of the cheapest things to animate on the GPU because the browser does not need to repaint the image content. Adding transition: background-position 0.4s ease enables smooth position changes on hover or state changes, which is ideal for sprite button effects. Using @keyframes you can animate background-position continuously to create a slow pan, a scrolling pattern, or a marquee texture. For scrolling pattern animations, ensure the animation end position aligns with a tile repeat boundary, since misaligned end frames cause a visible jump when the animation iterates.

background-position: center is equivalent to background-position: 50% 50% exactly, and the two values are fully interchangeable in modern browsers. Center is shorthand for center center, which places the 50% point of the image at the 50% point of the element on both axes. The result is the image centred within the element with equal amounts of the image cropped on opposite sides when background-size: cover is active. If you find yourself reaching for 50% values in your CSS, prefer the keyword: it reads better in code review and conveys design intent more clearly than a magic number.

Use background-position: right bottom or background-position: 100% 100%. Both place the bottom-right corner of the image at the bottom-right corner of the element exactly. To add a margin from the corner, use the four-value edge-offset syntax available in all modern browsers: background-position: right 10px bottom 10px. This positions the image with 10px of space from both the right and bottom edges, which previously required calc expressions or negative offsets to approximate. The four-value form is especially handy for decorative corner ornaments in cards and callouts where a tight but non-zero margin matters.

When background-attachment: fixed is set, background-position is interpreted relative to the viewport rather than the element, which changes the visual meaning of every position value. background-position: center places the image at the centre of the viewport, not the centre of the element, so a fixed background on a tall section can show different framing depending on the scroll position when the section first enters view. Adjust the position values to account for the viewport origin when switching from scroll to fixed attachment, and test on multiple viewport heights since taller viewports will shift the visible portion of the image.

Yes. background-position sets the origin point of the first tile, and every subsequent tile repeats from that origin in the direction allowed by background-repeat. background-position: 10px 10px offsets the entire tile grid by 10px from the top-left corner, which is useful for aligning pattern tiles to element boundaries, offsetting checkerboard patterns to land squares on a specific grid, or nudging a seam away from a visually important focal point. The tile grid wraps around: tiles that start beyond the element edge are placed on the opposite side so the pattern still fills the entire background positioning area without gaps.

background-position-x and background-position-y are longhand properties for the horizontal and vertical axes of background-position respectively. Use them when you need to animate or transition only one axis independently of the other. Setting transition: background-position-x 0.3s ease on a hover state slides the background horizontally without affecting its vertical position, which is exactly what sprite animations and slide-in icon effects require. They also allow setting different timing functions per axis, which the background-position shorthand cannot do because shorthand transitions apply a single timing function to the combined value.

The jump usually means there is no transition declared, so the browser snaps from the old position to the new one in a single frame. Add transition: background-position 0.3s ease to the base selector, not the :hover selector, so the same easing applies in both directions. A second cause is animating background-position alongside a layout-shifting property like padding: the layout change recalculates the background positioning area mid-animation and produces a visible hiccup. Move the layout change out of the hover state, or replace the layout shift with a transform that does not affect the box.

Yes. background-position accepts calc() expressions on either axis, which is helpful when you need to combine units. background-position: calc(100% - 20px) center positions the image 20px from the right edge using percentage arithmetic, and it works in browsers that do not yet support the four-value edge-offset syntax. calc() also lets you reference CSS custom properties: background-position: var(--icon-x) var(--icon-y) makes positioning themeable from a design tokens file without rewriting the shorthand at every call site.