[Solved] Problem inserting local image in HTML page using css? - CSS-Tricks

This topic is empty.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Posts
August 26, 2014 at 8:48 pm #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.
August 26, 2014 at 10:17 pm #180811

Paulie_D
Member

You have images in the root of c:?

August 26, 2014 at 10:33 pm #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.

August 26, 2014 at 10:34 pm #180814

nixnerd
Participant

You have images in the root of c:?

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

August 26, 2014 at 10:50 pm #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.

August 26, 2014 at 11:13 pm #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:\.

August 26, 2014 at 11:15 pm #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.

August 27, 2014 at 2:45 am #180837

sushmish
Participant

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

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

thanks for helping.

August 27, 2014 at 10:56 am #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.

September 1, 2014 at 1:08 pm #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”>
<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;
}
```
September 1, 2014 at 1:26 pm #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).
Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

The forum ‘CSS’ is closed to new topics and replies.