I am seeking a way to dynamically change the background color of an object based on a specific value. Specifically, I want to create a percentage bar with 100 different background colors possible, corresponding to each percent (excluding when empty). The width of the bar can vary from 1 to 100%. My goal is to automatically generate all these color variations without the need for multiple CSS classes or intricate JavaScript functions.
My initial idea involves creating a 100px-wide image, where each pixel represents a different color shade. By restricting the background-width to 1 pixel and adjusting the offset accordingly, I could theoretically repeat this pattern. However, I discovered that setting properties like background-size, background-position, and background-repeat in CSS does not work as intended. Therefore, my question is: Is there a simpler solution involving no more than three numerical CSS properties that are linearly connected to the percentage?
Thank you for your assistance.
EDIT: Recently, I had an innovative revelation which proved successful.
To implement this concept, I created a 1-pixel-wide image in Photoshop that is precisely 100 pixels in height. Each pixel within the image signifies color representation for a particular percentage, ranging from 1% to 100%. Next, I vertically stretched the image by at least the progress bar's height factor; e.g., if the bar's height is 20 pixels, I expanded the image by a factor of 20. To maintain color consistency without any unwanted gradients, I utilized the nearest-neighbor algorithm during stretching to yield sharp edges every 20 pixels.
The resultant stretched image serves as the background image, repeated horizontally. Applying image positioning, I set the background position as follows: 0 -[(percentage-1)*20]px and width: [percentage]%. These values are computed using PHP or JavaScript. By updating these two parameters whenever the percentage changes, the background automatically adjusts to display the appropriate colors.