 <p>Okay, @Arnold I'm not sure that I fully understand your question, but in case it helps, you could use the <code>background-size</code> and <code>background-repeat</code> properties, for example:</p> <pre><code>&lt;div style="background-image: url('file.png'); background-size: x% y%; background-repeat: repeat-x;"&gt; </code></pre> <p>Where x and y are percentages that represent the width and the height, respectively. So if you have an image that is portrait (taller than it is wide), set y to 100% and x to a percentage evenly divisible by 100% that best represents the aspect ratio (so something like 10, 20, 25, 33.3, 50%). This way, your image will repeat evenly along the x-axis, but won't need to on the y because it's taking up 100% of the element height.</p> <p>(Conversely, if the image is landscape (wider than it is tall), x would be 100% and y would be divisible by 100 and use <code>repeat-y</code> instead of <code>repeat-x</code>.)</p> <p>This might take some tinkering and depends on whether the image is something that will look ok with its aspect ratio being off somewhat. It may or may not be the solution you need, but I figured it's worth a shot.</p>