no-repeat makes image disappear

Question

I'm learning css and xhtml through a website called html.net. I'm following their instructions while working on my own website. I've just started the CSS tutorials on image background and i am encountering a small but annoying problem. When I do this, everything is fine. Meaning, there are pirate ships all over the place. It looks like the spanish armada.

body {
background-color: silver;
background-image: url("pix/pirateship.jpg")

}

h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}

But... when i try and follow the next example, this is not showing any image at all.

body {
background-color: silver;
background-image: url("pix/pirateship.jpg")
background-repeat: no-repeat;   

}

h1 {font-size: 40px; font-family: arial; color:yellow; background-color:#0000a0;}
h2 {color:maroon;}
li {font-size: 20px; font-family: arial; color:#87f717; background-color:#34282c;}
table {color:black; background-color:gray;}
th {color:black;}

I suspect this has something... actually, I don't know enough to start suspecting. I'm just gonna leave this one to you guys, and hopefully somebody knows the solution.

PS All of that is in a css file in the same folder as the index file. When I try and use any of the no-repeat, repeat-x or repeat-y values all of my pirates vamoose. The regular background image shows just fine when I don't use those.

Answer 1

you're missing a semi-colon after the background-image selector in your second example. If this is an copy and paste of your code, then that missing semi-colon is the problem.