help setting background image in css

Discussion in 'Web Design and Development' started by TodVader, Feb 17, 2008.

  1. TodVader macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #1
    I want to use this image as a background for the div containing my left sidebar, center content and right sidebar:
    http://freewebs.com/csstesting/mainbg.jpg

    Here's the page I'm testing this on:
    http://freewebs.com/csstesting/testing2.html

    Here's the HTML:

    <html>
    <head>
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" type="text/css" href="testing2.css">
    </head>
    <body>
    <div id="doc">
    <div id="head">HEAD</div>
    <div id="body">
    <div id="main">
    <div id="content">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
    <div id="rightnav">ADSENSE</div>
    </div>
    <div id="leftnav">NAVIGATION</div>
    </div>
    <div id="foot">FOOT</div>
    </div>
    </body>
    </html>


    ....And here's the CSS:

    #doc {width: 800px;}
    #head {
    clear: both;
    width: 800px;
    }
    #body {
    width: 800px;
    background-image: url(mainbg.jpg);
    background-repeat: repeat-y;
    }
    #main {
    width: 640px;
    float: right;
    }
    #rightnav {
    width: 160px;
    float: right;
    }
    #content {
    width: 480px;
    float: left;
    }
    #leftnav {
    float: left;
    width: 160px;
    }
    #foot{
    width: 800px;
    clear: both;
    }


    I use this method so the content div comes up right after the header in the HTML. My problem is that the background image doesn't work how I thought it would. Does anyone know how to fix this?
     
  2. TodVader thread starter macrumors 6502a

    TodVader

    Joined:
    Sep 27, 2005
    Location:
    Quebec, Canada
    #2
    I just tried putting the background image in the doc div. It works but puts in from the top to the bottom of the page. I could put a header and footer background image which would override the doc background but I wonder why it doesn't work in the body div.
     
  3. FetalSage macrumors regular

    Joined:
    Jul 5, 2007
    #3
    It's good practice not to have a Div tag ID to be body. Rather give it something unique, outercontent etc.

    To have that image as a background for your document, use the following in your CSS:

    body {
    background: url(mainbg.jpg) repeat-y;
    }

    Because your #body div doesn't 'stretch' in height with your content, the background image will not show. I suggest you use 'clearfix', visit alistapart.com and have a look at what it is.

    You also have a few errors within your HTML coding. Make sure you visit this page to validate your code.
     

Share This Page