CSS background-position Property

background-position is a CSS property allows us to define where a background image should be positioned within an element.

The background-position property can take length, percentage or keyword values. The available keywords are top, bottom, right, left and center. The keywords can be used in any order, and when only one keyword is used the other is assumed to be set to center.

If an element has multiple background images, you can define a comma-separated list of background-position values in the same order as the background images are defined.

A Few Examples

Keyword Values

.alligator-show-box {
  background-size: 25%;
  background-repeat: no-repeat;
  background-image:
    url(/images/police.svg),
    url(/images/doctor.svg),
    url(/images/pirate.svg),
    url(/images/cowboy.svg),
    url(/images/chef.svg);
  background-position:
    top left,
    top right,
    center,
    bottom,
    left bottom;
}

Percentage & Length Values

.alligator-show-box2 {
  background-size: 25%;
  background-repeat: no-repeat;
  background-image:
    url(/images/police.svg),
    url(/images/doctor.svg),
    url(/images/pirate.svg),
    url(/images/cowboy.svg),
    url(/images/chef.svg);
  background-position:
    75% 0,
    100%,
    20px 20px,
    50%,
    0 90%;
}
  Tweet It
✖ Clear

🕵 Search Results

🔎 Searching...