The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Repeat background only in the left side

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #37152


    My colleges designers made a website design that looks like this:

    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.



    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?


    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?


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


    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%”?


    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:

    here’s a screen grab of what i think you want:

    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:


    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.


    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.


    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
    Here I can easily set different backgrounds for left and right divs.

    Anyway, thanks for helping me.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.