treehouse : what would you like to learn today?
Web Design Web Development iOS Development

background image alignment

  • 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
  • Not being able to put the bg in a container, kind of hamstrings you a bit.
    You could try this:
    html {
    margin-left:-1px;
    overflow-y:scroll;
    }

    Which is based on this article http://www.sohtanaka.com/web-design/1px-background-alignment-bug/
  • 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