successfulfail — 2012-12-20T23:15:59-05:00 — #1
When I upload this CSS code, HTML code to the hosting server, the slogan.png image does not show up...
margin: 40px auto 0;
/* padding: 0 0 50px; */
margin: 40px auto 0;
padding: 0 0 0 100px;
background-image: url(img/slogan.png) no-repeat 75px 50%;
ralphm — 2012-12-20T23:17:42-05:00 — #2
background-image: url(<font color='"#FF0000"'>img/slogan.png</font>) no-repeat 75px 50%;
That path assumes that the image folder is in the same folder as your CSS file. Is it?
successfulfail — 2012-12-20T23:19:43-05:00 — #3
No slogan.png image file is at "img" folder.
Currently I have two folders in use: img folder, css folder.
Do I have to move the image location to make it work?
ronpat — 2012-12-21T00:33:10-05:00 — #4
The question asked is: Where is the "img" folder???
Currently, your css file is looking for the "img" folder in its css directory like this:
css/cssfile.css /* path to image: img/slogan.png */
Absolute vs Relative paths:
/img/slogan.png is an absolute path to the image.
img/slogan.png is a relative path to the image.
/img/slogan.png /* these folders are in the root directory */
/css/cssfile.css /* path to image: /img/slogan.png , or ../img/slogan.png */
img/slogan.png /* these folders are in the same directory as the html file, which may not be the root directory. */
css/cssfile.css /* within this css file, the path to the image may be different than in the above css file // path to image: ../img/slogan */
successfulfail — 2012-12-21T01:53:46-05:00 — #5
"img" folder is located where index.html file is (So in the root directory)
I have fixed my CSS code to: /img/slogan.png (So I fixed it to the absolute path)
However the image (slogan.png) is no where to be seen...
successfulfail — 2012-12-21T02:08:24-05:00 — #6
I changed the CSS code to:
<font color='"#FF0000"'>background</font>: url(/img/slogan.png) no-repeat 75px 50%;
And now the image is visible.
ronpat — 2012-12-21T03:47:02-05:00 — #7
ralphm — 2012-12-21T03:51:18-05:00 — #8
[ot]Over time, around here, there have been arguments over whether something like
is actually "absolute" or not. I used to call it that, but the panditas have now convinced me to call it a "root relative" path, and to reserve "abolute" for paths of this ilk:
It's "absolute" because it works from anywhere—on any site. Seems fair enough to me. The other paths are relative to the site itself, but not universal, as it were. :)[/ot]
ronpat — 2012-12-21T04:10:58-05:00 — #9
When I wrote the post I had put (root relative) in parens, but deleted it to avoid mixing "relative" terms. While "root relative" is certainly a reasonable term, I would argue that including the URI in a path makes it a network path rather than an absolute path. The internet is fundamentally a massive network. Taking a very-well-established computer design/engineering term and deciding that it is now the domain of the internetters to redefine as they please seems a bit weird. Network path is far more correct than absolute path. Oh, well.
A network path can be directed anywhere. http://sitename can be routed anywhere. There is nothing "absolute" about it. It's ethereal at best. An absolute path is a hardware path that is indeed root relative and cannot be changed. Adopting the term absolute path for one that begins with http:// does not seem very smart.
ralphm — 2012-12-21T05:59:33-05:00 — #10
Yes, you have a larger view of it than I do, but meh, I claim to be only the messenger here. :lol: I guess I think in terms of a URI being a uniform locator that is unique to that resource, so I think of it as absolute in that sense—that it points to one place/ one unique location from any point.
polyhedra — 2012-12-21T11:34:10-05:00 — #11
It is importent to write CSS corectly.
1) Write the CSS like this background: url(/img/slogan.png) 75px 50% no-repeat;
Here is how to use the background propertie
2) Use paths either from root or starting from your CSS file. Understand how your server handles paths!
Here is a fun picture on folder paths
Notice my server is lighttpd and it handles both paths from root "/", and also path from the css "../media/"
Take a look