Background image and window scaling

HTML & CSS
1

Hello everyone. Just today I started with a little project just for fun loosely based on this design http://thinkpixellab.com/. My spin involves a left column which isn’t fixed in position since its less than ideal for anyone with a small screen. My question is if it is somehow possible to keep the background in alignment with the columns.

Right now I have my background image set to center top, and fixed but of course unless the window is big enough to where no horizantal scroll bar is showing or it is perfectly centered it throws the entire design out of whack (lots of overlapping and whatnot). Its not the same in the link I provided above since mine is a bit different but I hope I explained it well enough because I dont have anywhere to host it.

I’ve provide my code so you guys can get an idea of what Im talking about. Do any of you know of any way around this issue?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>
            Title
        </title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="topborder"></div>
        <div id="container">
            <div id="left">
                <img src="images/logo.png" id="logo"/>
                <ul>
                    <li><a href="#">News</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Photos</a></li>
                    <li><a href="#">Videos</a></li>
                    <li><a href="#">Forum</a></li>
                </ul>
            </div>
            <div id="right">
                <div id="content">
                    
                    <div class="heading">
                        <h3>Latest News</h3>
                    </div>
                    
                    <div id="left-column">
                        <div class="entry">
                            <h2>Lorem ipsum dolor sit amet</h2>
                            <small>Posted: May 18 1989</small>
                            <p>
                                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan...
                            </p>
                        </div>
                    </div>
                    
                    <div id="right-column">
                        <h3>Recent Posts</h3>
                        <ul>
                            <li>lorem ipsum dolor sit amet</li>
                            <li>lorem ipsum dolor sit amet</li>
                        </ul>
                        <h3>Recent Comments</h3>
                        <ul>
                            <li>lorem ipsum dolor sit amet</li>
                            <li>lorem ipsum dolor sit amet</li>
                        </ul>
                    </div>
                    
                </div>
            </div>
            <br class="clear"/>
        </div>
    </body>
</html>



body
{
    background: url("images/background.gif") center top repeat-y fixed;
    color: #000;
}

#topborder
{
    width: 100%;
    height: 10px;
    background: #DC3522;
    position: fixed;
    top: 0px;
}

#container
{
    width: 1000px;
    margin: 10px auto 0px;
    /*background: green;*/
}

#left
{
    width: 300px;
    /*background: blue;*/
    float: left;
}

#logo
{
    position: relative;
    top: 88px;
    left: 108px;
}

#left a
{
    font-size: 20px;
    text-decoration: none;
}

#left ul
{
    text-align: right;
    margin-top: 140px;
    margin-right: 22px;
    padding: 0px;
}

#left ul li
{
    margin-bottom: 16px;
    list-style: none;
}

#right
{
    width: 700px;
    /*background: #ff0000;*/
    float: right;
}

.heading h3
{
    background: #DC3522;
    color: #fff;
    float: left;
    border-left: 20px solid #DC3522;
    padding: 5px 20px 5px 0px;
    font-size: 20px;
    font-weight: normal;
}

#left-column
{
    clear: left;
    width: 440px;
    float: left;
    margin: 40px 20px 0px;
}

* html #left-column
{
    display:inline; /* double margin fix */
}

#right-column
{
    display: inline;
    width: 200px;
    float: right;
    /*background: yellow;*/
    margin-right: 20px;
    margin-top: 40px;
}

.entry
{
    clear: both;
}

.entry h2
{
    font-size: 18px;
    margin-top: 15px;
}

.entry small
{
    font-size: 11px;
    line-height: 30px;
}

.entry p
{
    font-size: 12px;
}

#right h3
{
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
    float: left;
}

#right ul
{
    padding: 0px;
    clear: both;
}

#right ul li
{
    list-style: none;
    font-size: 12px;
    margin-bottom: 15px;
}

Also to get a better understanding of what I mean its best to actually use a background image imo. I would just use this http://thinkpixellab.com/wp-content/themes/pixellab/images/bg.png.

Thanks for the help.

2

Why does the image on the body need to be fixed?

You have it as repeat-y so I’m guessing it is just a repeating section and would therefore not need to be fixed.

If you unfix it then you can set a min-width on html and body to keep it from sliding off the page.


html,body{min-width:1000px}
body
{
    background: url("http://thinkpixellab.com/wp-content/themes/pixellab/images/bg.png") center top repeat-y ;
    color: #000;
}

That pixellab page is pretty unusable and all the content slides off at small widths and is unreachable.

3

Hey thanks Paul that did the trick. Also I like the way that pixellab site is laid out but as you said its horrible in terms of usability…thats mostly what Im trying to get around or at least improve on here.