Grow your CSS skills. Land your dream job.

background image alignment

  • # May 4, 2009 at 7:24 am

    Hi

    We have a problem here thats just sucking the time out of us…

    http://www.informo.se/pol2/

    The background picture is repeated all the way to the bottom of the page and center aligned. Its this center alignment thats giving different results in different web browsers as it doesn’t always completely line up with the edges of the columns.

    Thought about using an image in the container that is left justified (then we have fine pixel control) but when the content is too short, there is a gap at the bottom of the page.

    Thanks very much in advance.
    Nigel

    # May 4, 2009 at 8:13 am

    Not being able to put the bg in a container, kind of hamstrings you a bit.
    You could try this:

    Code:
    html {
    margin-left:-1px;
    overflow-y:scroll;
    }

    Which is based on this article http://www.sohtanaka.com/web-design/1px-background-alignment-bug/

    # May 4, 2009 at 10:01 am

    That solution didn’t seem to work. But we got it solved. Put the image background in the container div and set the height and min-height to 100%. Also added a footer with the same background image.

    Thanks for the reply anyway.
    Nigel

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

You must be logged in to reply to this topic.

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