Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Problem inserting local image in HTML page using css?

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #180806
    sushmish
    Participant

    my HTML file is lemon.html and saved in
    c:\Html folder\lemon.html

    <html>
    <head>

    <title>your title goes here</title>

    <link rel=”stylesheet” type=”text/css” href=”c:\
    css folder\lemonstyle.css”>

    </head>

    <body>

    <h1>lemon is a fruit</h1>
    </body>

    </html>

    My css file is lemonstyle.css and is saved in c:\css folder\lemonstyle.css . image file(f.jpg) is saved in c:\f.jpg.

    body
    {

      background-image:url(c:\f.jpg);
      background-repeat:no-repeat;
    

    }

    while running the lemon.html file in IE ,I can’t see the image.The page displays only “lemon is a fruit”.

    please go thru it and help me to shot out it.

    thank u.

    #180811
    Paulie_D
    Member

    You have images in the root of c:?

    #180813
    nixnerd
    Participant

    Ok… here’s the problem: Your stylesheet has no idea where c:\f.jpg is. You need to use a relative file path. That is, a file path that points to the location of the image RELATIVE to the document requesting it. That is an absolute file path. The only way I can describe this is:

    Imagine you’re standing on some nondescript street corner in a city you don’t know and I’m telling you how to get to your car. Now, would it do you more good for me to say “It’s at the SE corner of Washington and 4th” or would it be better for me to say “From where you’re standing, you need to head into the sunset for 200 yards?” Obviously the latter… provided you didn’t have a smartphone… which your stylesheet doesn’t.

    I’m not really certain of the syntax, but you need to jump up a level in the file system or go one deeper, whatever you prefer.

    Here’s your photo:

    c:\f.jpg

    Here is your stylesheet:

    c:\css\lemonstyle.css

    Your stylesheet needs to know to look beyond the css directory it’s in and go looking up in c:\ or ‘down’ in c:\

    Try this:

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

    Not sure if that’s going to work but that’s how *Nix systems do it. Here’s what our’s looks like:

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

    I hope that helped. Either that or I just confused you more.

    <sidetrack> It’s so weird to see a directory called c:\ and type the ‘\’ key without first pressing shift :) </sidetrack>

    Edit: An absolute filepath would probably work on a *Nix system and might work on a Windows system if done correctly… I’ve just never tried because there’s no point really.

    #180814
    nixnerd
    Participant

    You have images in the root of c:?

    Paulie: that was my first thought… but I just went with it.

    #180815
    nixnerd
    Participant

    Is c: basically the same as / ? I don’t have a windows system for reference but if I remember correctly, there is no ‘root’ directory. It seems like c: has many siblings at the same level… which now seems super foreign.

    #180820
    __
    Participant

    Is c: basically the same as / ?

    Kinda. / is a filesystem root, where c is a drive root. In practice, yeah, whatever, just call it the same thing.

    I’m thinking that Paulie_D is probably right, that the image isn’t really at c:\.

    #180821
    nixnerd
    Participant

    Ohhh gotcha because Windows has multiple ‘mounted’ drives if I can say that. But I do remember that c is where the important stuff is… so you probably shouldn’t be putting project files there.

    It’s been too long since I’ve used Windows… God I miss it.

    #180837
    sushmish
    Participant

    background-image: url(‘../f.jpg’);

    is the correct code which I used.it really works.

    thanks for helping.

    #180870
    __
    Participant

    Ohhh gotcha because Windows has multiple ‘mounted’ drives if I can say that.

    Yeah. Where in Linux you mount drives at paths (like /), in Windows you mount paths on drives (like c:\).


    @sushmish
    , I would highly recommend creating a new folder for your web projects and keeping all your web-related files there, rather than crowding your c:\ drive. In general, it’s best not to save anything there, because it gets confusing when your own files/folders are mixed up with system files/folders.

    If you are running a local web server (i.e., with xampp), then I’d suggest putting all your web files in your web root directory. If not, your Documents folder is probably a good place for them.

    #181327
    happycodings
    Participant

    http://html-css.happycodings.com/import-style-from-a-css-file.html
    Import style from a css file

    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
    <html>
    <head>
    <meta http-equiv=”content-type” content=”text/xhtml; charset=windows-1252″ />
    <meta http-equiv=”content-language” content=”en-us” />
    <title>Import Style From A Css File</title>
    <style type=”text/css”>
    @import url(http://www.happycodings.com/style.css);
    </style>
    </head>
    <body>
    <h1>Love Sayings Love Quotes Love Proverbs</h1>

        &lt;h2&gt;Love Love Love&lt;/h2&gt;
    
        The mountains are capped with snow of white&lt;br&gt;
           The fires are lit, the cabins are bright&lt;br&gt;
           Two lovers sit, not alone tonight&lt;br&gt;
           Their hearts are warm on this cold winter night&lt;br&gt;
           Outside the snow falls to the ground&lt;br&gt;
           But no one will know, it won't make a sound&lt;br&gt;&lt;br&gt;
    
           Cody Schroeder
    
    &lt;/body&gt;
    

    </html>


    css file:

    p {
        font-size: 16px;
        color: red;
    }
    
    h1, h2, p {
        font-family: arial;
    }
    
    h1, h2 {
        color: blue;
        font-size: 25px;
    }
    
    #181329
    __
    Participant

    @happycodings is there a reason you posted this?

    You don’t offer any explanation, and it doesn’t seem in any way related to the OP’s problem (which, if you read the thread, you’ll see they have already found a solution to).

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.