background-image not displaying

NathanFeaver

08-01-2011, 08:05 PM

Hi all,
I'm trying to build a personal website. My first big hurdle has been getting images to display properly with CSS. I have been unable to get a background image to appear when adding to the body element as well as specific div or in-line elements.

I think the problem might be because I am testing the website locally on my computer. Maybe Firefox is assuming that the image is supposed to be found online from the url but even when I use the full url (file:///C/...image.gif) it does not appear.

I am using Firefox 5.0 to preview my website. Any help/ideas would be greatly appreciated. Here is a sample of the code that I'm using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title>test page</title>
<style type="text/css" media="screen">
body {
background-image: url(image.gif);
}
</style>
</head>
<body>

</body>
</html>

Sammy12

08-01-2011, 08:50 PM

try using a shorter method

background-image: url('images/image.png');

to check if the file path is wrong, open up chrome, right click --> inspect element. Click on the url of the image (show in the picture). If an image does not appear then the file path is wrong

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-50.png

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-51.png

you can also try body, html { min-height: 100%; }

Ocean11

08-01-2011, 10:05 PM

Hello,

I am having a problem with the background color on my website. It works fine in Firefox but it does not work in Internet Explorer.

Here is the website, so you can see: www.lawyerduncan.com

Here is the code:

<table width="100" border="0" align="center" cellpadding="0" cellspacing="0" style="background-repeat:repeat-x; background-position:top; height:100%; background-image:url(images/til_1.jpg) ">

Any suggestions on how to fix it so it works in Firefox and Internet Explorer?

Thanks!

Sammy12

08-01-2011, 10:48 PM

post a new thread on this. it's a separate problem.

1. background-image: url(images/til_1.jpg);"> (close the tag)

2. Put all this in a css file

3. use position: absolute; instead of position: fixed; on page-background

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.lawyerduncan.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0