Absolute Beginner Needing Help!

Hi!

I tried setting up my website with dreamweaver and came pretty far without knowing anything at all about html or css. But after having come across many problems in the design I was adviced to learn these and better understand how it all works...I was a little negative at first, but now it is seems pretty cool:)

I checked out some tutorials on line, reading w3school etc, and they have been great! But...

I already have a problem:

I created a css style sheet with different div id ( as in one of the tutorials)
for the body it looks like this:

#body {
width: 620px;

}

and in html the same part looks like this:

<div id="body"></div>

Now, the thing I wanted to do was to add a background image which only appears in this body field. Shall I add it in the css or html document?
I tried like this in the css one:

#body {
width: 620px;
background-image: url("collagebackgroundsmall3.jpg");

}

But it doesnt work, nothing happens on the html document...

Do you know what I am doing wrong??

This is probably a really silly question, but I really am a beginner:-)

Thank you for readin!

Lia

You might want to try putting something inside the div first, make it like:

<div id="body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris volutpat. Aliquam ultrices, lacus consectetur dapibus
lacinia, urna nulla adipiscing massa, ac pretium quam augue
ut arcu. Phasellus tincidunt, nulla eu adipiscing pharetra,
augue urna pharetra eros, eu gravida erat purus non
lorem.</p>

<p>Nulla porttitor, metus at vehicula elementum, ante justo
facilisis felis, ut tempus dolor dui facilisis felis. Duis in nunc
vel massa accumsan scelerisque. Fusce velit metus, dapibus
vitae, congue ut, lacinia in, justo. In sed orci. Fusce est tellus,
ultricies nec, congue nec, bibendum vitae, eros. Pellentesque
sem. Praesent erat. Proin sed magna.</p>
</div>

Basically, putting something inside your div expands it vertically, giving the div an implicit height value. If the div doesn't have contents, its height is automatically set to zero pixels (depending on the browser, of course). Alternatively, you can supply an explicit height to your div, like:

#body {
height: 480px;
width: 620px;
}

This method though might cause some problems when it comes to cross-browser compatibility. IE6 auto-expands the div vertically if the content exceeds the height that you provided; other browsers like FF and Opera don't do this. So, using this method involves a bit more work in order to get things just right.

Problems that you may encounter...
1. the div is still no 620px wide: check to see if you've properly linked the CSS file to your HTML file.

2. still no background image: check if you got PATH to the background image right. Unless your using an absolute PATH, like "http://mysite.com/myimage.jpg", the PATH should be relative to the CSS file, not the HTML file.