Multiple background image position

Question

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.         


        

Answer 1

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>

Answer 2

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
}