Why won't my background image style sheet setting work with a separate CSS file?

Question

This style sheet code ...

background-image: url(img/parchment.jpg);

works perfectly well when the CSS data is included within the HTML file, but if I have the identical code included in a linked CSS file, the background image doesn't appear. Any ideas please?

Answer 1

Try this:

background-image: url("img/parchment.jpg");

For any file/image etc you wish to link from CSS to HTML documents you need to put the link in quotation marks. Also ensure that your actual file for this image is in the path img/ and not image/ or images/ etc.

Also don't forget to indicate in the CSS whether it is a repeatable image or not...

background-repeat: no-repeat;

for an image that does not repeat, etc.

But my bet is you already knew all this, working at length with code can sometimes make us overlook the most minute detail that makes a huge amount of difference.


Good luck

Answer 2

I assume the rest of the code in your linked CSS file does work?

Hard to tell without seeing your files, but my first suggestion would be to change the placement of the code within the file. The Body { code should probably be the first property in your CSS file, so make sure it's at the top. Also, make sure there's nothing in you HTML file that might cancel the CSS (like a BACKGROUND="" statement).

Again, without seeing the files, it's hard to say.