Background position

Syntax

Class
Properties
bg-{xPosName}
background-position: {xPosName};
bg-{yPosName}
background-position: {yPosName};
bg-{xPosName}-{yPosName}
background-position: {xPosName} {yPosName};
bg-{yPosName}-{xPosName}
background-position: {yPosName} {xPosName};
bg-pos-{xPos}-{yPos}
background-position: {xPos} {yPos};
bg-pos-x-{xPos}
background-position-x: {xPos};
bg-pos-y-{yPos}
background-position-y: {yPos};

Parameters

xPosName
left | center | right

Horizontal background position.

yPosName
top | center | bottom

Veritcal background position.

xPos
<length-percentage>

Horizontal background position.

yPos
<length-percentage>

Veritcal background position.

<div class="t1 w-256 h-256 shadow-4 bg-center" style="background-image: url(/assets/tree-w320.jpg?o1-cache=1);"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Center
t1 bg-center
.t1.bg-center { background-position: center; }
Top
t1 bg-top
.t1.bg-top { background-position: top; }
Right top
t1 bg-right-top
.t1.bg-right-top { background-position: right top; }
Top right
t1 bg-top-right
.t1.bg-top-right { background-position: top right; }
Right
t1 bg-right
.t1.bg-right { background-position: right; }
Right bottom
t1 bg-right-bottom
.t1.bg-right-bottom { background-position: right bottom; }
Bottom right
t1 bg-bottom-right
.t1.bg-bottom-right { background-position: bottom right; }
Bottom
t1 bg-bottom
.t1.bg-bottom { background-position: bottom; }
Left bottom
t1 bg-left-bottom
.t1.bg-left-bottom { background-position: left bottom; }
Bottom left
t1 bg-bottom-left
.t1.bg-bottom-left { background-position: bottom left; }
Left
t1 bg-left
.t1.bg-left { background-position: left; }
Left top
t1 bg-left-top
.t1.bg-left-top { background-position: left top; }
Top left
t1 bg-top-left
.t1.bg-top-left { background-position: top left; }
Position provided as percentage.
t1 bg-pos-10%-20%
.t1.bg-pos-10\%-20\% { background-position: 10% 20%; }
Position provided in px units.
t1 bg-pos-10px-20px
.t1.bg-pos-10px-20px { background-position: 10px 20px; }
Units must be provided when providing position in numeric form
t1 bg-pos-10-20
Error: invalid arguments passed to utility function [bg-pos] in [bg-pos-10-20] invalid arguments passed to utility function [bg] in [bg-pos-10-20]
Position X.
t1 bg-pos-x-10%
.t1.bg-pos-x-10\% { background-position-x: 10%; }
Position Y.
t1 bg-pos-y-10%
.t1.bg-pos-y-10\% { background-position-y: 10%; }