Repeat background only in the left side

[sanya88]

Hi,

My colleges designers made a website design that looks like this: http://goo.gl/GV31v

Does it posible to repeat background to the left but keep the right side white?

Note that the page has a fixed width of 1000px, and that gray background has to fill all left side of the page.

Any help will be appreciated.

Sanya.

[dfogge]

cant you just set the aside’s background-color to grey and the main content area’s background-color to white?

or am i misunderstanding something?

[sanya88]

The left background is not just a solid color – it has a gradient.
And my website has to be centered and with a fixed width.

Yes, I can set bg for aside, but what about rest of the space to the left of aside?

[Paulie_D]

If it’s a gradient why not use that and just stop it at 50%?

[sanya88]

It would be a huge png file, because you never know how big display width are.
Or what you mean by saying “stop it at 50%”?

[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

[sanya88]

Well… that’s interesting solution but it not works on old IEs and I have more complex background on the left which I was going to save as an image.

[Paulie_D]

You say it’s a gradient…do you have a picture you could show us?

You would need to provide a fallback for IE

I can’t see why the image file would need to be huge as it only need to be a few pixels tall and you could just repeat it vertically.

[sanya88]

Probably I did not explained my issue correctly, so you can’t understand what I need.
Basically, I need a centered

with a fixed width and different backgrounds in the left and right.

And I guess I’ve found a solution http://jsfiddle.net/byYKE/
Here I can easily set different backgrounds for left and right divs.

Anyway, thanks for helping me.

[Author]

Posts