CODEWITHSUNDEEP
css
nodex
nodex

Reputation: 41

How does the CSS background-position property work in this example?

In this example I know the first two values, it's an X Y value and it position the element in the top left.

What does the second set of values do, how does it work?

background-position: 0 0, 25px 25px;

Upvotes: 2

Views: 58

Answers (1)

Roy
Roy

Reputation: 8089

The background-position value can have multiple comma separated values (just like your example). It is used in situations when you also have multiple background-images defined, these are also comma separated values.

Example of multiple background images:

body {
  background-image: url(background-1.jpg), url(background-2.jpg);
}

Combined with multiple background-positions, it will look like below. Each background-position definition will match its equivalent inside the background-image list.

body {
  background-image: url(background-1.jpg), url(background-2.jpg);
  background-position: 0 0, 25px 25px;
}

Read more about background-image and background-position at MDN.

Upvotes: 1

Related Questions