How to use background-position percentage correctly in this case?

Question

I'm about to pull my hair out on this one.

I have a horizontal strip made of different divs. Their width is defined by a percentage of the total strip width (which is unknown)

for example:

---------------------------------
|     |     |            |      |
---------------------------------
0%   20%   40%          80%    100%

Now I want to have a background image which basically spans over the whole strip but I have to define them individually on every div because they might have different variations based on which div it is.

So the first div (0% - 20%) would have a background-width of 500% and a background-position of (0, 0)

The second one (20% - 40%) would also have a background-width of 500% and a background-position of (25%, 0) (more on that later)

The third one (40% - 80%) would have a background-width of 250% and a background-position of (~66.66%, 0)

The last one (80%-100%) would once again have a background-width of 500% and a background-position of (100%, 0)

Now this might sound like a really stupid problem but I just can't wrap my head around how to calculate the correct values for the background-positions based on the div-width and position on the strip even though I think I roughly understand how the percentage positioning works. I would really appreciate someone pointing me in the right direction.

Edit: After some scribbling I think I figured it out but I'm not posting it as an answer yet because my brain is too fried to even understand the reasoning behind it. Maybe someone will take the time to explain why this works. I'm certainly going to try after getting some sleep. I'm able to calculate the correct values like this:

background_position_x = div_strip_position_x + div_width * div_strip_position_x / (100 - div_width)

(All variables are in percentages)

Answer 1

When you use percentages in background-position:

The size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.container {
  position: relative;
  display: block;
  width: 100%;
  font-size: 0;
}

.container>div {
  display: inline-block;
  height: 200px;
  background-repeat: no-repeat;
}

.container#example1>div {
  width: 50%;
  background-size: 200% 100%;
}

.container#example2>div {
  width: 33.33%;
  background-size: 300% 100%;
}

.container#example3>div {
  width: 25%;
  background-size: 400% 100%;
}

#example1 #d1 {
  background-image: url(http://placehold.it/500x400/333333/000000);
  background-position: 0% 0;
}

#example1 #d2 {
  background-image: url(http://placehold.it/500x400/666666/000000);
  background-position: 100% 0;
}

#example2 #d1 {
  background-image: url(http://placehold.it/50x400/333333/000000);
  background-position: 0% 0;
}

#example2 #d2 {
  background-image: url(http://placehold.it/50x400/666666/000000);
  background-position: 50% 0;
}

#example2 #d3 {
  background-image: url(http://placehold.it/50x400/999999/000000);
  background-position: 100% 0;
}

#example3 #d1 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 0% 0;
}

#example3 #d2 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 33.33% 0;
}

#example3 #d3 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 66.66% 0;
}

#example3 #d4 {
  background-image: url(http://weknownyourdreamz.com/images/park/park-07.jpg);
  background-position: 100% 0;
}

<div id="example1" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
</div>

<hr>

<div id="example2" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
</div>

<hr>

<div id="example3" class="container">
  <div id="d1"></div>
  <div id="d2"></div>
  <div id="d3"></div>
  <div id="d4"></div>
</div>

Lets look at example3.

The "easiest" way to work out what to use for background-position with each segment is...

100% / (segmentID * (numberOfSegments -1))

So in this case, we want 4 total segments.

1. 100% / (0 * (4-1)) == 0%
2. 100% / (1 * (4-1)) == 33.33%
3. 100% / (2 * (4-1)) == 66.66%
4. 100% / (3 * (4-1)) == 100%

Note that this will only work when background-size: width == numberOfSegments * 100%.

Answer 2

1- Wrap them in a parent div. 2- Make their displays "inline-block" and vertical-align "middle". 3- Apply the background image to all. 4- Set the background-size and position for each individually.

.row-1{
  display:block;
  font-size:0;
}
.row-1 > div{
text-align:center;
height:20px;
display:inline-block;
vertical-align:middle;
background: url('http://www.imagestowallpapers.com/wp-content/uploads/2015/12/Background-Image-CSS4.jpg') no-repeat center center fixed;
    background-size: cover;
}
.w20{
   width:20%;
   background-color:red;
   font-size:13px
}
.w40{
   width:40%;
   font-size:13px;
}
.w20.first{
    background-position:0 0;
    background-size: 500%;
}
.w20.second{
   background-position:25% 0;
   background-size: 500%;
}
.w20.third{
   background-position:66.66% 0;
   background-size: 250%;
}
.w20.forth{
   background-position:100% 0;
   background-size: 500%;
}

<div class="row-1">
  <div class="w20 first">1</div>
  <div class="w20 second">2</div>
  <div class="w40 third">3</div>
  <div class="w20 forth">4</div>
</div>

Answer 3

As far as I understand it, background-positioning is relative to the div itself, not its parent container. So you might have to either use 0 for X or a negative value if you want to offset it, so that the image ends up at the parent's X=0 coordinate. Keep in mind that box-sizing will affect the values.

Depending on your project, you might also use CSS3's calc function or a JavaScript/jQuery solution.

Here are some links I found that might help you out:

• Is there a way to position a background image relative to the centre of an element?
• Offset a background image from the right using CSS
• http://blog.vjeux.com/2012/image/css-understanding-percentage-background-position.html

Here is an MDN article for further information.