css - css背景repeat-x、strech-y

Question

xで繰り返し、yで引き伸ばしたいグラデーションのある縞模様の背景があります。私はこれがうまくいくと思った：

background: url(bg.jpg) repeat-x;
background-size: auto 100%;

ただし、y 方向に伸びるか、x 方向に繰り返すかのいずれかであり、両方が同時に発生することはありません。

http://codepen.io/anon/pen/JCjEb

編集:縞模様の背景にもグラデーションがあるため、単純にyで繰り返すことはできないことに注意してください(下が暗く、上が明るい)。

Answer 1

background: url(bg.jpg) repeat;background-size なしでそのまま使用できます。これが例です。

Answer 2

試すbackground: url(bg.png) center repeat-x;

ただし、IE8以下については不明ですが、それが問題である場合。