Forums

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
    Posts
  • #37152
    sanya88
    Member

    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.

    #99087
    dfogge
    Participant

    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?

    #99095
    sanya88
    Member

    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?

    #99096
    Paulie_D
    Member

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

    #99099
    sanya88
    Member

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

    #99100
    dfogge
    Participant

    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

    #99102
    sanya88
    Member

    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.

    #99154
    Paulie_D
    Member

    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.

    #99155
    sanya88
    Member

    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.

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