no-repeat makes image disappear

css, html, xhtml

Solution

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.

Problem

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.

Original source