Developer
Intros
How it works
API reference
Turbo CSS
Fundamentals
Utilities
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Width
Min width
Max width
Height
Min height
Max height
Margin
Padding
Border
Border width
Border color
Border style
Border radius
Outline
Outline width
Outline color
Outline style
Outline offset
Top
Right
Bottom
Left
Inset
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Justify content
Align content
Align items
Align self
Table layout
Border collapse
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object fit
Object position
Box shadow
Opacity
Visibility
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Appearance
Cursor
Pointer events
Resize
User select
Fill
Stroke color
Stroke width
Selectors
Download
Turbo UI
Turbo Playground
License
Blog
Developer
Intros
How it works
API reference
Turbo CSS
Blog
Fundamentals
Utilities
Selectors
Download
Turbo UI
Turbo Playground
License
Layout
Box sizing
Display
Float
Clear
Overflow
Position
Z index
Sizing
Width
Min width
Max width
Height
Min height
Max height
Spacing
Margin
Padding
Border
Border
Border width
Border color
Border style
Border radius
Outline
Outline
Outline width
Outline color
Outline style
Outline offset
Coordinates
Top
Right
Bottom
Left
Inset
Flexbox
Flex direction
Flex grow
Flex shrink
Flex basis
Flex wrap
Order
Flex
Flex box alignment
Box alignment
Justify content
Align content
Align items
Align self
Table
Table layout
Border collapse
Background
Background attachment
Background clip
Background color
Background position
Background repeat
Background size
Background pattern
Object
Object fit
Object position
Effects
Box shadow
Opacity
Visibility
Text
Color
Font family
Font size
Font smoothing
Font style
Font weight
Letter spacing
Line height
List style type
List style position
Tab size
Text align
Text decoration
Text transform
Text overflow
Vertical align
Whitespace
Word break
Transform
Transform
Scale
Rotate
Translate
Skew
Transform origin
Transition
Transition
Transition property
Transition duration
Transition timing function
Transition delay
Interactivity
Appearance
Cursor
Pointer events
Resize
User select
SVG
Fill
Stroke color
Stroke width
Object position
Syntax
Class
Properties
object-
{xPosName}
object-position:
{xPosName}
;
object-
{yPosName}
object-position:
{yPosName}
;
object-
{xPosName}
-
{yPosName}
object-position:
{xPosName}
{yPosName}
;
object-
{yPosName}
-
{xPosName}
object-position:
{yPosName}
{xPosName}
;
object-pos-
{xPos}
-
{yPos}
object-position:
{xPos}
{yPos}
;
Parameters
xPosName
left | center | right
Horizontal object position.
yPosName
top | center | bottom
Vertical object position.
xPos
<length-percentage default-unit=1%>
Horizontal object position.
yPos
<length-percentage default-unit=1%>
Vertical object position.
object-center
object-top-left
object-top
object-top-right
object-right
object-bottom-right
object-bottom
object-bottom-left
object-left
object-pos-10%-20%
<img class="t1 w-256 h-256 bg-c-white shadow-4 object-none object-center" src="/assets/tree-w320.jpg?o1-cache=1">
Specification test cases
The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Use object-center
t1 object-center
.t1.object-center { object-position: center; }
Use object-top
t1 object-top
.t1.object-top { object-position: top; }
Use object-right-top
t1 object-right-top
.t1.object-right-top { object-position: right top; }
Use object-top-right
t1 object-top-right
.t1.object-top-right { object-position: top right; }
Use object-right
t1 object-right
.t1.object-right { object-position: right; }
Use object-right-bottom
t1 object-right-bottom
.t1.object-right-bottom { object-position: right bottom; }
Use object-bottom-right
t1 object-bottom-right
.t1.object-bottom-right { object-position: bottom right; }
Use object-bottom
t1 object-bottom
.t1.object-bottom { object-position: bottom; }
Use object-left-bottom
t1 object-left-bottom
.t1.object-left-bottom { object-position: left bottom; }
Use object-bottom-left
t1 object-bottom-left
.t1.object-bottom-left { object-position: bottom left; }
Use object-left
t1 object-left
.t1.object-left { object-position: left; }
Use object-left-top
t1 object-left-top
.t1.object-left-top { object-position: left top; }
Use object-top-left
t1 object-top-left
.t1.object-top-left { object-position: top left; }
Position provided as percentage.
t1 object-pos-10%-20%
.t1.object-pos-10\%-20\% { object-position: 10% 20%; }
Position provided in px units.
t1 object-pos-10px-20px
.t1.object-pos-10px-20px { object-position: 10px 20px; }
Units must be provided when providing position in numeric form
t1 object-pos-10-20
Error: invalid arguments passed to utility function [object-pos] in [object-pos-10-20] invalid arguments passed to utility function [object] in [object-pos-10-20]