Displaying image on web-apge

aldridgedj

12-08-2002, 04:39 AM

I wrote html code using an external css to display a picture. The image displayed when I previewed the sheet but when I upload it to the web the picture is not displayed. The html code is :

<html>
<head>
<link rel="stylesheet" type="text/css" href="lostfound.css">
<style type="text/css">
body {color: black; background: white; background-image: url("paper_b011.gif")}
</style>
<title>LOST & FOUND</title>
<br>
<h1>Can You Identify These People?
</head>
<p>
<img src=Bigdad.jpg alt="Big Dad and two ladies" border=0></img>
</body>
</html>

and the lostfound.css:

h1 {text-align:center; text-indent: 2.0em; font-family:Georgia,sans-serif; font-size:24pt}
h2 {text-align:left; font-family:Georgia,sans-serif; font-size:18pt}
p {font-family:Georgia,serif; font-size:10pt}
dt {font-weight:bold; font-family:Georgia,serif; font-size:12pt}
dd {font-family:Georgia,serif; font-size:10pt}
ul {list-style-type: square}
li {font-family:Georgia,serif; font-size:10pt}
blockquote {font-family:Georgia,serif; font-size:10pt; font-style:italic}

cg9com

12-08-2002, 06:21 AM

as far as i know, you cannot display an image through CSS

before we try to solve your problem, lets look at your markup.

first off, add your:

<style type="text/css">
body {color: black; background: white; background-image: url("paper_b011.gif")}
</style>

in your external css, no reason to exclude that.

secondly the <img> is whats called an empty tag, it doesnt require a closing ...
here is the correct version of your coding, see how it works

<html>
<head>
<title>LOST & FOUND</title>
</head>
<body>
<br>
<h1>Can You Identify These People? </h1>
<p>
<img src="Bigdad.jpg" alt="Big Dad and two ladies" border="0">
</p>
</body>
</html>

and in your CSS

body {color: black; background: white; background-image: url("paper_b011.gif")}
h1 {text-align:center; text-indent: 2.0em; font-family:Georgia,sans-serif; font-size:24pt}
h2 {text-align:left; font-family:Georgia,sans-serif; font-size:18pt}
p {font-family:Georgia,serif; font-size:10pt}
dt {font-weight:bold; font-family:Georgia,serif; font-size:12pt}
dd {font-family:Georgia,serif; font-size:10pt}
ul {list-style-type: square}
li {font-family:Georgia,serif; font-size:10pt}
blockquote {font-family:Georgia,serif; font-size:10pt; font-style:italic}

notice the changes i made, make sure that you have correct markup.
and remember to actually call the external file on your page, otherwise its useless, do it like this:

<link rel="stylesheet" type="text/css" href="nameoffile.css">

try that and see if everything works out okay ;)

Ökii

12-08-2002, 03:40 PM

as cg9com says, do what he stated and check that all the associated images are also uploaded to your server and that their names are exactly (case-sensitive) the same as in your script. ie. a capital B for Bigdad.jpg - windows will allow case insensitive finding of files whereas *nix will not and I reckon you're probably hosted on a *nix box.

tommysphone

12-10-2002, 01:43 PM

BACKGROUND-IMAGE: url(imagesfolder/imagename.gif) Works for me.