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

What are the best situations to utilize bootstrap and when should you avoid it?

Unable to choose the specific div element within the container that has an inset shadow applied by utilizing Pseudo

The absence of an eye icon in the password field when using bootstrap 5

Is it possible to execute this animation with a single click for repetitive playback?

Managing the width of an HTML table column based on its text content dynamically

Utilizing JQuery for a smooth animation effect with the slide down feature

Resolve the issue of Dojo images not appearing on a div in Internet Explorer

Prevent tooltips from displaying outside of an HTML table by using the overflow hidden property for horizontal scrolling

Adjust the dimensions of the embedded Google document

Angular directive specifically meant for the parent element

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

What is the best way to embed a section of another website within an iframe and seamlessly guide a user to complete a purchase using a shopping cart?

Code Snippet: Adjust Table Column Alignment using CSS

What is the best way to adjust a horizontal list of inline elements to stack vertically when the div container is resized?

What is the best way to position an image in the center over a video using HTML and CSS?

Incorporate a 'Select All' functionality into ion-select by adding a dedicated button

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

Designing a scrollbar for a tr element using HTML and CSS

Caution: The `className` property does not align with Material UI css which may cause issues upon reload

The code in check.js causes a square of dots to emerge on the screen in Skype