Re: Repeat background only in the left side

[dfogge]

i think paulie may be onto something here. try applying the gradient to the wrapper div.

to build your gradient i recommend you go here: http://www.colorzilla.com/gradient-editor/

here’s a screen grab of what i think you want: http://i.minus.com/i8yJaMpBaRGow.jpg

what you have to do is put a gray stop-marker on the left side, a white one on the right, and one of each right where you want the gray to end. in my example i put it at 40%.

and here’s the code the above screenshot generated:

background: #7a7a7a; /* Old browsers */

background: -moz-linear-gradient(top,  #7a7a7a 0%, #a5a5a5 40%, #ffffff 40%, #ffffff 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7a7a7a), color-stop(40%,#a5a5a5), color-stop(40%,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* IE10+ */

background: linear-gradient(top,  #7a7a7a 0%,#a5a5a5 40%,#ffffff 40%,#ffffff 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7a7a7a', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

one glaring issue is supporting older browsers. check here to see where you will run into problems: http://caniuse.com/css-gradients