- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS background-position
The CSS background-position property is used to define the starting position of background-image. For example:
<!DOCTYPE html> <html> <head> <style> #myd{border: 4px solid chocolate; padding: 22px; background-image: url("images/sml-plnt-lf.jpg"); background-repeat: no-repeat; background-position: center;} </style> </head> <body> <div id="myd"> <h2>The background-position Property</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum.</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit numquam facere.</p> <p>Ipsa quae veniam asperiores recusandae eligendi incidunt ipsum, corporis deleniti.</p> <p>Autem tempore eveniet illum deserunt obcaecati veritatis optio inventore sapiente.</p> </div> </body> </html>
The background-position Property
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, laborum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Impedit numquam facere.
Ipsa quae veniam asperiores recusandae eligendi incidunt ipsum, corporis deleniti.
Autem tempore eveniet illum deserunt obcaecati veritatis optio inventore sapiente.
CSS background-position Syntax
The syntax of background-position property in CSS, is:
background-position: x;
The value of x should be any of the following:
- left top - used to position the background-image to left top of the element
- left center - used to position the background-image to left center of the element
- left bottom - used to position the background-image to left bottom of the element
- right top - used to position the background-image to right top of the element
- right center - used to position the background-image to right center of the element
- right bottom - used to position the background-image to right bottom of the element
- center top - used to position the background-image to top center of the element
- center center - used to position the background-image to center of the element from both vertically and horizontally
- center bottom - used to position the background-image to bottom center of the element
- x% y% - used to define the custom position of background-image based on the percentage. The x% refers to the horizontal position, whereas the y% refers to the vertical position. For example: 0% 0% refers to top left corner, whereas 100% 100% refers to right bottom corner.
- xpos ypos - used to define the custom position of background-image based on the length units. The xpos refers to the horizontal position, whereas ypos refers to the vertical position. For example: 0px 0px is equal to top left corner.
- initial - used to use the default value
- inherit - used to use the value inherited by the parent element
Note - The second value becomes center, if we provide only one value like left, right, top, or bottom. For example, background-position: left; is equal to background-position: left center;
Note - While defining custom position, using percentage, if we give only one value, then the other value will be 50%. For example, background-position: 20%; is equal to background-position: 20% 50%;
Note - While defining custom position, using length units, if we give only one value, then the other value will be 50%. For example, background-position: 20px; is equal to background-position: 20px 50%;
Note - The default value is top left, 0% 0% or 0px 0px.
CSS background-position Example
<!DOCTYPE html> <html> <head> <style> #a, #b, #c, #d, #e, #f, #g, #h, #i, #j, #k, #l, #m{border: 3px solid chocolate; padding: 22px; height: 200px; margin-bottom: 20px; background-image: url("images/usml-plnt-lf.jpg"); background-repeat: no-repeat;} #a{background-position: left top;} #b{background-position: left;} #c{background-position: left bottom;} #d{background-position: right top;} #e{background-position: right;} #f{background-position: right bottom;} #g{background-position: top;} #h{background-position: center;} #i{background-position: bottom;} #j{background-position: 2% 50%;} #k{background-position: 2%;} #l{background-position: 4px 16px;} #m{background-position: 4px;} </style> </head> <body> <h3>background-position: left top</h3> <div id="a"></div> <h3>background-position: left</h3> <div id="b"></div> <h3>background-position: left bottom</h3> <div id="c"></div> <h3>background-position: right top</h3> <div id="d"></div> <h3>background-position: right</h3> <div id="e"></div> <h3>background-position: right bottom</h3> <div id="f"></div> <h3>background-position: top</h3> <div id="g"></div> <h3>background-position: center</h3> <div id="h"></div> <h3>background-position: bottom</h3> <div id="i"></div> <h3>background-position: 2% 50%</h3> <div id="j"></div> <h3>background-position: 2%</h3> <div id="k"></div> <h3>background-position: 4px 16px</h3> <div id="l"></div> <h3>background-position: 4px</h3> <div id="m"></div> </body> </html>
background-position: left top
background-position: left
background-position: left bottom
background-position: right top
background-position: right
background-position: right bottom
background-position: top
background-position: center
background-position: bottom
background-position: 2% 50%
background-position: 2%
background-position: 4px 16px
background-position: 4px
« Previous Tutorial Next Tutorial »