Tiled Background Image over Two Columns

HTML & CSS
1

I have a fixed layout of 750px. It’s a two column layout with header and footer. I want to color the two columns so they both stretch from the header to the footer, as opposed to one side being longer than the other. I’m repeating a 1px image set at the background to try to accomplish this.
This is in the test phase only. After it works fluently, the other pages will use this layout as well.
My question is: What size should the tiled image be? It’s now 750px wide. Also, is this the right place for the tiled image to appear in the background element of the css? Lastly, when I add html to the blue side, left side sidebar, known as side-a in html, the colored image only appears below the added text. All text appears in white above the blue image. What changes need to be made in order to make side-a one fluid color even when text appears in the column?
I’ve added the url in case it’s needed. If the html is needed, I can post it as well.

url:http://www.ittyke.com/testfiles/redowatchtvwdivtags.html
------------css below this line----------------------


body, html {
        margin: 0;
    padding: 0;
    background: #FFF url(../Images/2col1pxbluegrey750.jpg) repeat-y 130px 137px;
    
}
#h1 {
    color:#2B2B2B;
}
#h2 {

}
#h3 {

}
#h4 {

}
#h5 {

}
#h6 {

}
#wrapper {
    margin: 0 auto;
    border: 1px solid #2F1006;
    width: 750px;
}

#header {
    background: #9BAD92;
    font-family: Calibri, Verdana, Sans-Serif;
    font-variant: small-caps;
    font-size: 2em;
    font-weight: bolder;
    color: #2B2B2B;
    text-align: center;
}
#navbar {
    height: 33px;
        width: 750px;
        border-top: solid #000 1px;
        border-bottom: solid #000 1px;
        background-color: #E7E7E7;
}

div#navbar ul {
    margin: 0px;
    padding: 0px;
    font-family: Calibri, Verdana, sans-serif;
    font-size: 16px;
    font-variant:small-caps;
    font-weight:bolder;
    color: #000;
    line-height: 30px;
    white-space: nowrap;
    text-align:center;
}

div#navbar li {
    list-style-type: none;
    display: inline;
}

div#navbar li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}

div#navbar li a:link {
    color: #FFF;
}

div#navbar li a:visited {
    color: #CCC;
}

div#navbar li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #067E00;
}

#side-a {
    float: left;
    width: 210px;
    background-color: #FFF;

}

#side-b { 
    float: right;
    width: 500px;
}

div#footer {
    height: 130px;
    width: 100%;
    border-top: solid #000 1px;
    border-bottom: solid #000 1px;
    color: #FF0000;
    background-color: #444444;
}

div#footer ul {
    margin: 0;
    padding: 0;
    font-family: Calibri, Verdana, sans-serif;
    font-size: 16px;
    font-variant:small-caps;
    font-weight:bolder;
    color: #FF0000;
    line-height: 30px;
    white-space: nowrap;
    text-align:center;
}

div#footer li {
    list-style-type: none;
    display: inline;
}

div#footer li a {
    text-decoration: none;
    padding: 7px 10px;
    color: #FFF;
}

div#footer li a:link {
    color: #FFF;
}

div#footer li a:visited {
    color: #CCC;
}

div#footer li a:hover {
    font-weight: bold;
    color: #FFF;
    background-color: #6C2810;
}

#footer {
    clear: both;
    background: #ADADAD;
}
* html #footer {
  height:1px;
}

-------------no more css---------------

thank you so much for your help!

2

Hi,
You still need to move it to the #wrapper div as I explained above.

It does not line up correctly when it is applied to the body element. You have the BG-position set at 130px left, which might make it look right on your browser but even then it will not line up when you reduce the viewport width.

Hook it to the wrapper div and then no BG-positions are needed at all. :wink:

3

Thanks, Rayzur:
I made the image 10px in height to reduce the repeat function and removed the color in side-a so now the text appears correctly in the image color as intended. One last thing… .
The font color of the navbar text, above the main content, will not change even when I modify the navbar color element. Any ideas how to fix this?
Thanks so much!

4

Thank you, Paul. Really appreciate your eyes and talent!
Problem resolved.

5

What size should the tiled image be? It’s now 750px wide.

Hi,
The width is correct, although I like to make my repeating images at least 10px tall so the browser can paint it ten times faster and reduce it’s work. You won’t notice much of a difference in file sizes.

Also, is this the right place for the tiled image to appear in the background element of the css?

Yes, it is decoration so it belongs in the css as a BG image. It really needs to be moved from the body to the #wrapper div though.


#wrapper {
    margin: 0 auto;
    border: 1px solid #2F1006;
    width: 750px;
   [B] background: [/B]#FFF url(../Images/2col1pxbluegrey750.jpg) repeat-y;
}

All text appears in white above the blue image. What changes need to be made in order to make side-a one fluid color even when text appears in the column?

You shouldn’t have any problems with text in the left column however I don’t see any text in the html for the left column on your page.

This Example should show you the basic set up for a two column layout.

6

You have defined it twice here:

div#navbar li a {
        text-decoration: none;
        padding: 7px 10px;
       [B] color: #99FF99;[/B]
}

div#navbar li a:link {
        [B]color: #FFF;[/B]
}

The white colour will win out as it is last in the cascade and has a pseudo class. Just remove that last rule unless you want to style the pseudo states differently.

Or do something like this if you have previously defined the pseudo classes.


div#navbar li a,
div#navbar li a:link,
div#navbar li a:visited {
     [B]    color: red;[/B]
 }
7

Rayzur:
Thank you, sir. Worked like a charm!
Until next time… .