Matteo Matteo - 2 years ago 74
CSS Question

can't display background image HTML

I'm using a LAMP installation to create some personal sites.
I just can't understand why i won't be able to put a background image in the body section of my site.

Either if I use css or simple HTML when i try to put an image as background the result will be a blank page, or colored if I set a background color.

<body background="./image.jpg">






<link href="style.css" rel="stylesheet" type="text/css" media="screen" />






body {
background-color: #FFFFCC;
background-image: url(./image.jpg);
background-attachment: fixed;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #787878;

Any ideas on what i could be doing wrong?

Maybe there's some kind of module to activate in order to visualize images?

Any help will be very appreciated!!


Answer Source

Tips for debugging and other info, which should hopefully lead you to the correct answer:

  • Check to see if you can see the image directly in your web browser. If the path you're using to the HTML file is, for example, "", then browse directly to "" and see if the image appears. If it doesn't, then your image is inaccessible, or in the wrong place, or possibly corrupt or being served with the wrong Content-Type.

  • If the image is in the right place but seems inaccessible, check the file permissions first. The file should be readable by the web server. If in doubt, give it the same ownership and permissions as the HTML file you're successfully reading. (On Windows, view the properties/permissions of the file and allow everyone to read it. On Unix, try chmod 644 <filename>.)

  • Consider the possibility that the image might actually be working fine, but also be a single pixel, or completely transparent, or a plain colour the same as its background, or positioned out of sight with the CSS positioning attributes.

  • Try temporarily using another image, preferably one you can definitely see on the web in the web browser you're using for testing, downloaded with that browser (that will make sure there are no weird problems with the image file itself.)

  • Remember that if you're defining the background in a CSS file, the path to the image is relative to that CSS file, not to the HTML file.

  • The "background" attribute is deprecated in HTML. If you want to specify a background inline in the HTML, try <body style="background-image: url(image.jpg);" >...</body>. But the proper place for this would be in the CSS these days.

  • You don't need "./" in front of your image location. If it's in the same directory as your HTML file, just use the name of the image, e.g. <body style="background-image: url(image.jpg);">

  • Does it work as a plain image? <img src="background.jpg"/>

  • Sanity-check your HTML by using a very simple, valid test document, like this one:

    <!DOCTYPE html>
    <body style="background-image: url(;">
        This is a test.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download