Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2002
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Displaying image on web-apge

    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}

  • #2
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by cg9com; 12-08-2002 at 06:27 AM.

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    577
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Ökii - formerly pootergeist
    teckis - take your time and it'll save you time.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    262
    Thanks
    0
    Thanked 0 Times in 0 Posts

    try

    BACKGROUND-IMAGE: url(imagesfolder/imagename.gif) Works for me.
    Therapy is expensive, popping bubble wrap is cheap, you choose.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •