The background-position property sets the position of a background image relative to the positioning area defined by background-origin. Values may be a keyword (left, center, right, top, bottom), a <length-percentage>, or a combination. With multiple layers, give one value per layer separated by commas..hero {
background-position: center;
}.offset {
background-position: right 20px bottom 10px;
}min:0max:9999step:1units:% | px | em | rem | vw | vh | vmin | vmax | ptleftAligns to the left horizontal edge (equivalent to 0% on X axis).rightAligns to the right horizontal edge (equivalent to 100% on X axis).topAligns to the top vertical edge (equivalent to 0% on Y axis).bottomAligns to the bottom vertical edge (equivalent to 100% on Y axis).centerCenters on the relevant axis (equivalent to 50%).CSS Backgrounds Module Level 4First Public Working Draft<length-percentage>W3CMDNCSSShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationvalue typessourcesvisual demonstrationpreviousnext
