CSS background-position Property

Datetime:2016-08-23 03:04:35          Topic: CSS           Share

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

The bacground-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-seperated 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%;
}




About List