CODEWITHSUNDEEP
htmlcss
minlare
minlare

Reputation: 2654

Multiple background image position

Take a look at the fiddle.

background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
background-repeat: no-repeat;
background-position: 75% 0, 50% 0, 25% 0, 0 0;
width: 400px;

The element is 400px wide and the background image is 100px wide. Each background image position is at 25% intervals, so I would expect each background image to be rendered every 100px, but this is not the case.

Anyone shed some light on this? I guess I'm missing something basic.

Upvotes: 3

Views: 263

Answers (2)

Harry
Harry

Reputation: 89750

Solution

You must use the following setting for background-position

background-position: 100% 0, 33.33% 0, 66.67% 0, 0 0;


.background-image {
  background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
  background-repeat: no-repeat;
  background-position: 100% 0, 66.67% 0, 33.33% 0, 0 0;
  width: 400px;
  height: 20px
}
.background-color {
  background: linear-gradient(to right, black 0%, black 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
  width: 400px;
  height: 20px;
}
100px x 20px = http://www.gtsalive.com/images/partners/pizzahut.jpg
<br>
<br>
<div class="background-image"></div>
<div class="background-color"></div>

Calculation Logic

Essentially, the logic becomes something like the below when we have multiple images and all of them are of equal size:

  • For Horizontal placement of images:

    • Position X in percentage = 100% * (image's number - 1) / (total no. of images - 1)

  • For Vertical placement of images:

    • Position Y in percentage = 100% * (image's number - 1) / (total no. of images - 1)

Reasoning

This is because when a percentage value is provided for background-position the user agent tries to match the point corresponding to the percentage value in the background image along with the corresponding point (specified by the same percentage value) in the element that is having the background image.

Quoting W3C Spec:

A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.

Point to Note

The above behavior is only for percentage based positioning. Pixel based positioning works as per normal expectation. That is, the below setting would work perfectly fine:

background-position: 300px 0, 200px 0, 100px 0, 0px 0;


.background-image {
  background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg), url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
  background-repeat: no-repeat;
  background-position: 300px 0, 200px 0, 100px 0, 0px 0;
  width: 400px;
  height: 20px
}
.background-color {
  background: linear-gradient(to right, black 0%, black 25%, blue 25%, blue 50%, green 50%, green 75%, orange 75%);
  width: 400px;
  height: 20px;
}
100px x 20px = http://www.gtsalive.com/images/partners/pizzahut.jpg
<br>
<br>
<div class="background-image"></div>
<div class="background-color"></div>

Upvotes: 3

Kesha Seyfert
Kesha Seyfert

Reputation: 38

Why you don't use background-repeat?

.background-image{
    background-image: url(http://www.gtsalive.com/images/partners/pizzahut.jpg);
    background-size: 100px auto;
    background-repeat: x-repeat;
    background-position: 0 0;
    width: 400px;
    height: 20px
}

Upvotes: 0

Related Questions