Need help? Check out our Support site, then


can't get a background pattern to appear in my css

  1. Hi all,

    I'm trying to get a background pattern to appear in a gap at the top between the main content and side column. you can see the gap here. http://retrodc.wordpress.com/

    Here's my css.
    any ideas where I missed it?

    #header {
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align:left;
    width:700px;
    height:200px;
    margin:0;
    }

    body {
    font-size:70%;
    font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color:#f8e8c4;
    background-image:url('http://www.retrodc.com/red.gif');
    background-repeat:repeat;
    color:#000000;
    text-align:left;
    margin:0;
    padding:0;
    }

    img.noborder {
    border:0;
    margin:0;
    padding:0;
    }

    #header h1 {
    display:none;
    }

    #header .description {
    display:none;
    }

    #page {
    background-color:#F8E8C4;
    width:700px;
    margin:0 auto;
    padding:0;
    }

    #content {
    float:left;
    background-color:#F8E8C4;
    background-image:url('http://www.retrodc.com/bg.jpg');
    background-repeat:repeat-x;
    width:450px;
    overflow:hidden;
    margin:0;
    padding:10px 0 0 25px;
    }

    #sidebar {
    width:170px;
    background-color:#F8E8C4;
    background-image:url('http://www.retrodc.com/bg.jpg');
    background-repeat:repeat-x;
    margin:0 0 0 500px;
    padding:5px 0 20px 25px;
    }

    #footer {
    text-align:right;
    clear:both;
    height:50px;
    margin:0;
    padding:20px 15px 0 0;
    }

    a {
    color:#b33925;
    text-decoration:none;
    }

    a:hover {
    color:#000000;
    text-decoration:none;
    }

    h1,h2,h3 {
    font-family:'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight:bold;
    font-size:1.7em;
    }

    h2.pagetitle {
    text-align:right;
    border-bottom:1px solid #343A54;
    color:#000000;
    margin-top:0;
    padding-bottom:5px;
    margin-bottom:30px;
    }

    img.lefth2img {
    margin:0;
    padding:0 5px 0 0;
    }

    img.righth2img {
    margin:0 0 -12px;
    padding:0;
    }

    p img {
    margin:0 5px;
    }

    .wp-smiley {
    width:15px;
    height:15px;
    }

    #sidebar h2 {
    color:#000000;
    font-family:'Lucida Grande', Verdana, Sans-Serif;
    }

    .post h2 {
    display:inline;
    padding-bottom:5px;
    margin-bottom:5px;
    }

    .post small {
    display:block;
    }

    .post h3 {
    font-size:1.5em;
    margin:15px 0 0;
    padding:0;
    }

    .post {
    font-size:1.1em;
    line-height:1.4em;
    text-align:justify;
    }

    .postmetadata {
    text-align:right;
    padding-bottom:20px;
    margin-top:5px;
    padding-top:5px;
    border-top:1px solid #454C67;
    clear:both;
    }

    blockquote {
    padding-left:15px;
    border-left:4px solid #454C67;
    margin:15px 30px 0 0;
    }

    blockquote cite {
    display:block;
    margin:5px 0 0;
    }

    code {
    display:block;
    border:1px solid black;
    font:1.1em 'Courier New', Courier, Fixed;
    background-color:#eeeeee;
    color:black;
    margin:5px;
    padding:5px;
    }

    .navigation {
    margin-bottom:15px;
    }

    #sidebar ul ul li:before {
    content:"0BB 020";
    }

    #sidebar ul,#sidebar ul ol {
    margin:0;
    padding:0;
    }

    #sidebar ul li {
    list-style-type:none;
    list-style-image:none;
    margin-bottom:15px;
    }

    #sidebar ul p,#sidebar ul select {
    margin:5px 0 8px;
    }

    #sidebar ul ul,#sidebar ul ol {
    margin:5px 0 0 10px;
    }

    #sidebar ul ul ul,#sidebar ul ol {
    margin:0 0 0 10px;
    }

    ol li,#sidebar ul ol li {
    list-style:decimal outside;
    }

    #sidebar ul ul li,#sidebar ul ol li {
    margin:3px 0 0;
    padding:0;
    }

    #searchform {
    text-align:left;
    margin:auto 0;
    padding:5px 3px;
    }

    form#searchform input:focus {
    border:2px solid #963C22;
    margin:1px;
    }

    #searchform input {
    font:1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    border:1px solid #000000;
    margin:2px;
    }

    #searchform #s {
    width:115px;
    padding:2px;
    }

    #searchsubmit {
    display:none;
    }

    #respond {
    margin-top:30px;
    }

    #commentform input {
    width:170px;
    margin:5px 5px 1px 0;
    padding:2px;
    }

    #commentform textarea {
    width:100%;
    padding:2px;
    }

    #commentform #submit {
    float:right;
    margin:0;
    }

    #commentform p {
    margin:5px 0;
    }

    .alt {
    background-color:#F8E8C4;
    border-top:1px solid #136284;
    border-bottom:1px solid #136284;
    }

    .commentlist {
    text-align:justify;
    margin:0 0 20px;
    padding:0;
    }

    .commentlist li {
    list-style:none;
    margin:5px 0 3px;
    padding:5px 10px 3px;
    }

    .commentlist li .avatar {
    float:right;
    border:1px solid #ddd;
    padding:2px;
    }

    .commentlist p {
    margin:0 0 15px;
    }

    .nocomments {
    text-align:center;
    margin:0;
    padding:0;
    }

    .commentmetadata {
    display:block;
    margin:0;
    }

    .quote {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:#565637;
    font-size:12px;
    font-weight:bold;
    }

    .category {
    font-size:12px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    color:#343A54;
    }

  2. i see you're putting the background image image in both #content and #sidebar. right now, #content isn't filling the whole #page div. so you can do
    #content { width: 475px; }

    and that will remove the little gap.

  3. YES! I can't believe I missed that. css can be so goofy. thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.