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"> 

    <p>hello</p> 

</body>

index.html:

<head> 

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

</head>

<body> 

    <p>hello</p> 

</body>

style.css:

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 ac开发者_JAVA百科tivate in order to visualize images?

Any help will be very appreciated!!

Thanks!

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, "http://example.com/some/dir/index.html", then browse directly to "http://example.com/some/dir/image.jpg" 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>
    <html>
    <head>
        <title>Test</title>
    </head>
    <body style="background-image: url(http://placehold.it/350x150);">
        This is a test.
    </body>

Quite simply your path is not correct, also it might be easier for you to use a link like:

background-image: url(/images/image.jpg);

which would refer to WEBROOT then images folder. Use tools like Firebug of Chromes Inspector to find why the image doesn't load, its clearly a bad path to your image.

It is important to remember that the background-image is being set from the CSS file, therefore the path to the image is relative to the location of the CSS file, not the HTML file.

I had the same problem, and it was because of my file structure

Normally we have :

index.html
Images (folder) - image1.jpg
css(folder) - style.css

So, in order to get the path to access image1.jpg, you need to go up one folder. In the style.css file you will write ../Images/image1.jpg

instead of ./Images/image1.jpg

This was how I did it. Cheers

If the image is in the same directory, the rule should be

background-image: url('image.jpg');

NB: you may need to add the quotes above.

If the images are on your website, then A workaround could be to write the absolute path to the images on your website - That works both on local host and on your website.

use the following:

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

I was having the same problem and could never find a definitive solution. In my case I needed to add file:/// before the local path. That did the trick. So in css you would have something like:

background-image: url("file:///C:/Users.../resources/images/img-story-main.png");

If you're using atom, you can copy the full path to the img and paste on your browser. It will include the file/// That's how i figured it out.

Here's a very simple way to do it https://codepen.io/CITSimon/pen/QNZOmP

HTML

<HTML>

<HEAD>
</HEAD>

<BODY>
  <H1>My Heading On An Image</H1>
  <IMG SRC="https://image.shutterstock.com/image-photo/ripe-red-apple-green-leaf-600w-1669348621.jpg" alt="apple" />
</BODY>
<HTML>

CSS

h1{
  font-size : 50px;
}
img{
  position : absolute;
  left : 0px;
  top : 0px;
  z-index : -1;
  -webkit-filter : sepia(100%) opacity(0.5);
  filter : sepia(100%) opacity(0.5);;
}

can't display background image HTML