Multiple Backgrounds First-On-Top Order
Multiple background image layer list is front-to-back, background color lies behind all images; inputs are already parsed declaration-order layers. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
Multiple background layers are listed from front to back.
Multiple background layers are listed from front to back.1
The first layer can obscure later layers according to its actual coverage and transparency. Use Multiple Backgrounds First-On-Top Order to evaluate the supplied inputs under the specific model below.
When to use Multiple Backgrounds First-On-Top Order
Use Multiple Backgrounds First-On-Top Order to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use Multiple Backgrounds First-On-Top Order and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Caller background layer ids using the field table and validation rules below, then run the tool.
- Read Front to back layer ids, Topmost layer id and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| callerBackgroundLayerIds | Caller background layer ids | array of string | Required; constraints below |
Enter a nonempty array of unique nonblank background-layer IDs in CSS listing order. The returned top-to-bottom order is a copy of that array, with the first supplied layer in front. The tool does not reverse the list or inspect opacity, clipping or the final background color.
topToBottom = suppliedLayersInListingOrder Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| frontToBackLayerIds | Front to back layer ids | array of string |
| topmostLayerId | Topmost layer id | string |
{
"input": {
"callerBackgroundLayerIds": [
"front",
"back"
]
},
"output": {
"frontToBackLayerIds": [
"front",
"back"
],
"topmostLayerId": "front"
}
}Limitations and assumptions
The first layer can obscure later layers according to its actual coverage and transparency. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use grid-auto-flow:dense Packing Note for a related task: Dense grid placement can backfill earlier holes with later items.
Use Radial-Gradient Extent Keywords Lookup for a related task: A circular radial gradient can choose its radius by distance to box sides or corners.
References
-
Multiple Backgrounds First-On-Top Order — tool.io
Similar or alternative tools
- grid-auto-flow:dense Packing Note
Dense grid placement can backfill earlier holes with later items.
- Radial-Gradient Extent Keywords Lookup
A circular radial gradient can choose its radius by distance to box sides or corners.