Multiple background image positions
Look at the violin .
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 400 pixels wide and the background image is 100 pixels wide. Each position of the background image is 25% of the spacing, so I expect each background image to appear every 100 pixels, but this is not the case.
Has anyone shed some light on this? I guess I missed something basic.
source to share
Decision
You should 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
Basically, the logic becomes something like below when we have multiple images and they are all the same size:
-
For horizontal placement of images:
- X position percentage = 100% * (image number - 1) / (total number of images - 1)
-
For vertical placement of images:
- Y position percentage = 100% * (image number - 1) / (total number of images - 1)
Reasoning
This is because when a percentage is provided for background-position
, the user agent tries to match the point that corresponds to the percentage in the background image, along with the corresponding point (given the same percentage) in the element that has the background image.
Quoting the W3C Specification :
The X percentage aligns the X% point across (horizontal) or down (vertical) of the image with the X% point across (for horizontal) or down (for vertical) the element's fill box. For example, a pair of values "0% 0%" aligns the top left corner of the image with the top left corner of the fill box. The 100% 100% value parade places the lower-right corner of the image in the lower-right corner of the fill box. With a pair value of '14% 84% ', point 14% and 84% down, the image should be placed at point 14% and 84% down in the fill box.
Pointing to a note
The above behavior only applies to percentage positioning. Pixel based positioning is based on normal expectation. That is, the setting below will work 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>
source to share