Grow your CSS skills. Land your dream job.

Background images aren’t showing up [SOLVED]

  • # September 25, 2008 at 10:05 pm

    So I installed the starkers wordpress theme and began styling, but for some reason I can’t get my background images to show up.

    Site: http://www.brianfarris.net

    CSS:

    Code:
    #wrapper {margin: 0 auto; width:1000px;}

    #header {background-image:url(http://cdn.css-tricks.com/images/header.png);}
    #headerinfo {float:left;}
    #headersearch {float:right; margin: 150px 30px 0 0;}

    #maincontent {background-image:url(http://cdn.css-tricks.com/images/content.png); background-position: center top; background-repeat:repeat-y; margin-bottom:80px;}

    #content {width:600px; float:left; margin-left:115px;}
    #sidecontent {width:250px; float:right;}

    #footer {background-image:url(http://cdn.css-tricks.com/images/footer.png); clear:both;}
    #footercontent {width:900px; margin-left:115px;}

    Thanks.

    # September 25, 2008 at 10:56 pm

    You need to give the background image a width and height inorder for it to show. A div by itself is empty. even with a background image and color. unless you put the image directly in the div with the <img> tag. it won’t show up without the width and height

    # September 26, 2008 at 10:36 am

    Cool. Now riddle me this. Why is the content.png background not repeating vertically?

    http://www.brianfarris.net

    CSS:

    Code:
    #wrapper {margin: 0 auto; width:1000px;}

    #header {background-image:url(http://cdn.css-tricks.com/images/header.png); width:1000px; height: 185px; min-height:185px;}
    #headerinfo {float:left;}
    #headersearch {float:right; margin: 150px 30px 0 0;}

    #maincontent {background-image:url(http://cdn.css-tricks.com/images/content.png); background-repeat:repeat-y; margin-bottom:80px; width:1000px; height:421px; min-height:421px;}

    #content {width:600px; float:left; margin-left:115px;}
    #sidecontent {width:250px; float:right;}

    #footer {background-image:url(http://cdn.css-tricks.com/images/footer.png); clear:both; width:1000px; height:102px; min-height:102px;}
    #footercontent {width:900px; margin-left:115px;}

    # September 26, 2008 at 11:47 am

    Two things to fix it…

    1 – clear your floats in your maincontent div (add an empty div after the content and sidecontent divs with the clear:both CSS attribute)
    2 – remove the height and min-height from the maincontent div — these are not needed after you clear the floats

    I had to add some extra content to the content section to test it to make it expand beyond the height of your background image, but this worked for me.

    # September 26, 2008 at 2:11 pm

    I think your code is bad and that is why it’s not repeating.
    You have this

    Code:
    #maincontent {background-image:url(http://cdn.css-tricks.com/images/content.png); background-repeat:repeat-y; margin-bottom:80px; width:1000px; height:421px; min-height:421px;}

    this looks bad background-image:url(http://cdn.css-tricks.com/images/content.png); background-repeat:repeat-y;

    I think it should be background-image:url(images/content.png) repeat-y;

    # September 26, 2008 at 4:05 pm

    Sweet. Everything looks like it’s working. Check it out: http://www.brianfarris.net

    # September 26, 2008 at 5:03 pm

    google for the contact form for wordpress. there is a really cool plugin that you can install. then on the page you want to use the form you just do something like this

    [CONTACTFORM]

    It works really well.

    check it out

    http://wilsonwrites.com/?page_id=18

    # September 27, 2008 at 7:30 pm

    cforms II by delicious days is the ultimate WordPress contact form.

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

You must be logged in to reply to this topic.

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