background-position Percent Alignment Formula
Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
Description
A background-position percentage aligns the same percentage point of an image and its positioning area.
A background-position percentage aligns the same percentage point of an image and its positioning area. Therefore 50% centers the image using the leftover space, rather than moving its near edge halfway across the whole area.1, 2
Resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
When to use background-position Percent Alignment Formula
Use this tool to resolve one background-position percentage as a pixel offset from the near edge using positioning-area size minus rendered-image size; oversized images and out-of-range percentages are allowed.
Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
How to use background-position Percent Alignment Formula and understand its results
- Choose the CSS values, dimensions or counts for this calculation. Supply resolved numeric measurements in matching units and the explicit reference box or writing mode where required.
- Enter areaSize, imageSize, percent using the field table and calculation rules, then run the tool.
- Read offset. The explanation below defines the units, signs, ordering and any flags or placeholder values.
- If the tool reports an input issue, correct the values and run it again. Apply the stated assumptions when interpreting a successfully returned result.
| Input field | Meaning | Value type; see rules below | Requirement |
|---|---|---|---|
| areaSize | Area size | number; minimum: 0 | Required |
| imageSize | Image size | number; minimum: 0 | Required |
| percent | Percent | number | Required |
Enter one axis's nonnegative positioning-area and rendered-image sizes in pixels, plus a signed percentage. The tool subtracts the image size from the area size, applies the percentage and returns the signed near-edge offset in pixels. Equal sizes produce zero for every percentage; an oversized image makes the difference negative. A fallback multiplication order reduces underflow, and nonrepresentable nonzero offsets are errors.
offset = (areaSize − imageSize) × percent / 100 Units, indexing, boundary conditions and exceptional cases are defined in the calculation rules above.
| Output field | Meaning | Value type |
|---|---|---|
| offset | Offset | number |
{
"input": {
"areaSize": 300,
"imageSize": 100,
"percent": 50
},
"output": {
"offset": 100
}
}Limitations and assumptions
It does not resolve background-size, select a positioning area or parse multi-value CSS. Negative percentages and values above 100 are accepted. The same one-dimensional equation can be used for either axis when the correct sizes are supplied.
Numeric inputs must be finite. Follow the calculation-specific rules for overflow, underflow and exceptional cases. Missing required fields, extra fields, wrong value types and violations of the calculation rules are input errors.
Alternative or Complementary methods
Use Translate % Relative To Own Box Width: Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box. For a complementary task, use object-fit:contain Letterbox Dimensions: Compute contain scale, rendered dimensions, and total unused space for positive intrinsic dimensions and a nonnegative content box.
Further background: CSS Backgrounds and Borders: background positioning.
References
Similar or alternative tools
- Translate % Relative To Own Box Width
Resolve a signed horizontal translate percentage against an explicitly supplied reference-box width in pixels; the caller chooses the transform reference box.
- object-fit:contain Letterbox Dimensions
Compute contain scale, rendered dimensions, and total unused space for positive intrinsic dimensions and a nonnegative content box.