I'm faced with a dilemma regarding a background image that is 40px wide and 1200px high, which I want to use as the background for a website. Since most users' monitors are not larger than 1200px, I can easily fill the background by setting "background-repeat: repeat-x" and the image will cover the entire screen width. However, for larger monitors, there's a visible gap at the bottom.
To tackle this issue, I attempted using the background-size property. Surprisingly, it works well in Firefox with the following code:
background-image: url('gradient.png');
background-repeat: repeat-x;
background-size: 40px 100%;
However, Webkit-based browsers do not respond as expected.
Any suggestions?
--Edit--
I forgot to mention one thing: when I specify a pixel value for the height, background-size functions properly in webkit too. The downside is that I would then need to rely on JavaScript to set the height initially and upon browser resizing, something I wish to avoid.