I am learning css and xhtml through a website called html.net. I follow their instructions while working on my own website. I just started CSS tutorials in the background of an image, and I ran into a small but annoying problem. When I do this, everything is fine. Sense, there are pirate ships everywhere. It looks like a 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 to follow the following example, it does not display the 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 is something ... in fact, I don’t know enough to start suspecting. I just leave it to you guys and hopefully someone knows this solution.
PS All this in the css file in the same folder as the index file. When I try to use any no-repeat, repeat-x or repeat-y values, all my pirates are vamoose. The normal background image looks great when I do not use them.
source share