What is the correct way to apply background-position percentage in this situation?

Question

What is the correct way to apply background-position percentage in this situation?

This problem has got me at my wit's end.

Imagine a series of divs lined up horizontally. Each one is sized as a percentage of the total width, but that total width is unknown.

For instance:

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

Now, I need to set a background image that spans across all the divs. However, each div might have different requirements for how the background image should be positioned and its size.

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

The second div (20% - 40%) also requires a background-width of 500% and a background-position of (25%, 0) (more details on this later)

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

Finally, the last div (80%-100%) will again have a background-width of 500% with a background-position of (100%, 0)

It might seem like a trivial issue, but I'm struggling with calculating the correct values for these background-positions based on the div's width and position in the strip. Even though I have a rough understanding of percentage positioning, I can't quite wrap my head around it. Any guidance on this matter would be greatly appreciated.

Edit: After some trial and error, I believe I've cracked the code on this. However, before I share my solution, I'd like someone to verify its accuracy because my brain is too fried to grasp the reasoning behind it at this moment. Perhaps after some rest, I'll try to comprehend it myself. Here's how I managed to calculate the correct values:

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

(All values are in percentages)

html css

Answer 1

Answer №1

Using percentages in background-position:

To determine the background position, subtract the background image size from the background positioning area size. The size refers to the width for horizontal offsets and height for vertical offsets.

For more information on background positioning, visit this link.

.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%;
}
...

Lets take a closer look at example3.

The formula to calculate the background-position for each segment involves using,

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

In this particular case, there are 4 segments in total we need to consider.

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

This calculation method is effective when

background-size: width == numberOfSegments * 100%

.

Answer 2

Using percentages in background-position:

To determine the background position, subtract the background image size from the background positioning area size. The size refers to the width for horizontal offsets and height for vertical offsets.

For more information on background positioning, visit this link.

.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%;
}
...

Lets take a closer look at example3.

The formula to calculate the background-position for each segment involves using,

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

In this particular case, there are 4 segments in total we need to consider.

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

This calculation method is effective when

background-size: width == numberOfSegments * 100%

.

Answer 3

Answer №2

It seems that when it comes to background-positioning, the positioning is relative to the div itself rather than its parent container. To achieve the desired effect, you may need to use 0 for X or a negative value to create an offset so the image aligns with the parent's X=0 coordinate. It's important to consider how box-sizing will impact these values.

Depending on your specific project requirements, you could explore using CSS3's calc function or implementing a JavaScript/jQuery solution.

For additional insights and guidance, I discovered some informative resources:

Exploring ways to position a background image in relation to the center of an element
Methods for offsetting a background image from the right using CSS
Insights into understanding percentage-based background positioning in CSS

Additionally, check out this MDN article for further information on background positioning.

Answer 4

It seems that when it comes to background-positioning, the positioning is relative to the div itself rather than its parent container. To achieve the desired effect, you may need to use 0 for X or a negative value to create an offset so the image aligns with the parent's X=0 coordinate. It's important to consider how box-sizing will impact these values.

Depending on your specific project requirements, you could explore using CSS3's calc function or implementing a JavaScript/jQuery solution.

For additional insights and guidance, I discovered some informative resources:

Exploring ways to position a background image in relation to the center of an element
Methods for offsetting a background image from the right using CSS
Insights into understanding percentage-based background positioning in CSS

Additionally, check out this MDN article for further information on background positioning.

Answer 5

Answer №3

First, group them within a parent div element. Next, style their displays to be "inline-block" with a vertical alignment of "middle." Then, add a background image to all of them. Finally, customize the background size and position for each individual item.

.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.fourth{
   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 fourth">4</div>
</div>

Answer 6

First, group them within a parent div element. Next, style their displays to be "inline-block" with a vertical alignment of "middle." Then, add a background image to all of them. Finally, customize the background size and position for each individual item.

.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.fourth{
   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 fourth">4</div>
</div>

What is the correct way to apply background-position percentage in this situation?

Answer №1

Answer №2

Answer №3

Similar questions

The kendo ui grid has a bottom border that extends with overlapping heights

Ways to disable mousewheel function in jQuery

Showing a 2D array in HTML using ngFor loop

Creating an interactive date selection feature with a calendar icon in MVC 5

Use the controller to set the body's background image

Update the class of pagination to "active" using jQuery

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Fixing Sticky Navigation Bar on Scroll (JavaScript, HTML, CSS)

Ways to extract a specific line of text from HTML code

What is the best method to exclude the <a> tag when displaying content in HTML?

Unable to display background image on Webpage due to blank page issue while uploading it with HTML and CSS

What is causing the divs to remain stationary instead of floating away with BootStrap?

Utilizing JavaScript to present JSON data in HTML tables across various sections of a website

Modify the background color of each word within the search bar

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

Rotate images every 5 seconds, pulling them directly from the server

Is there a way to position the icon in the top left corner within the image using Vue and CSS?

Nested Divs in CSS

Using jquery to toggle active nav links in Bootstrap

Forming a header area by utilizing a 960 Grid container