If I have one div with two background gradients: #box { height:100px; width:100px; background: -webkit-gradient(linear, left top, left bottom, from(#9BCBE8), to(#CDE7F5)), -webkit-gradient(linear, left top, left bottom, from(#A5D1EB), to(#CDE7F5)); background-position: 44px 0px, 0 0; } Code (markup): Is there anyway I can get them to alternately repeat with css? If not is there a way to position a background every 44px so it leaves gaps inbetween? End result would be similar to the following concept..:
Why not just create a background image with the two colour strips and repeat-x? This does mean creating an image rather than just using CSS but is surely simpler? Don't think there's a way to alternately space the background repeat in CSS.
Are you kidding , a small image with horizontal repeat is the way to go . A big image only serves the ISP and your competition .