Grow your CSS skills. Land your dream job.

layout background problem

  • # August 28, 2009 at 8:31 am

    I’ve a 3 column div structure (1003px wide, set for 1024 x 768 resolution screens) and it works fine. It is a fixed width layout not a liquid / fluid one. It is centered as well.

    The left column has an image background and right column has another.

    Now the problem is, "as my client wants :-(", when somebody views it on a higher resolution (higher than 1024px) the left column background must expand to its left edge, so the right one.

    Since these are different images (background of left and right column) so I’m finding it impossible to expand the background image

    For the same background it is simply a strip in the body background, but I’m not able to figure out how to implement when we have two different patterns/textures.

    I’ve attached three images,
    1. Original layout screen shot on 1024 x 768 resolution.
    2. Original layout on 1280 x 1024.
    3. A rough layout of what my client wants.

    Dor
    # August 28, 2009 at 7:26 pm

    Separation is your friend in this case.

    Separate the "content" image from the background image. Cut the section of the background image that will repeat itself and use that as a background image for the body. Then apply it to the top and set repeat-x, like so:

    Code:
    body { background: url(images/section_of_background_that_repeats_itself.jpg) top left repeat-x #color; overflow: hidden; }

    overflow: hidden; is only needed in case the image might be larger then the browser width, because it might create a nasty looking scroll bar.
    #color is optional, if you want a default color of background, where the image does not cover.

    After doing so, apply the content image where you’d normally apply it. use absolute positioning if needed.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".