[css-d] Noob: relative URL specification in CSS
Hello, I'm pretty new at alll of this and ran into something I can't
resolve.
I have a webpage at:
http://localhost/kcpage/index.php
On my server (localhost) my folder structure is:
www:
-kcpage(folder)
--index.php
--css (folder)
--images(folder)
In my index.php I include my css stylesheet as follows in the head
section:
link rel=stylesheet type=text/css href=css/style.css /
I also include a logo as follows:
img src=images/logo.gif / This image displays just fine.
In my css stylesheet I have:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
Try as I might, I cannot figure out how to specify the url to make the
image appear as background on my page.
I tried:
url(bg.gif)
url(/images/bg.gif)
url(./images/bg.gif)
url(httPL//localhost/kcpage/images/bg.gif)
url(//localhost/kcpage/images/bg.gif)
Can someone please tell me how to specify the url in the stylesheet to
pick up the background image?
Thanks.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
On 2/11/2010, at 8:30 AM, MikeB wrote: Try as I might, I cannot figure out how to specify the url to make the image appear as background on my page. I tried: url(bg.gif) url(/images/bg.gif) url(./images/bg.gif) url(httPL//localhost/kcpage/images/bg.gif) url(//localhost/kcpage/images/bg.gif) Can someone please tell me how to specify the url in the stylesheet to pick up the background image? All paths are relative to the CSS file. To go up a directory use '..'. So... url(../images/bg.gif) Cheers, Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
url(bg.gif) That's looking at http://localhost/kcpage/css/bg.gif. url(/images/bg.gif) This one is trying http://localhost/images/bg.gif. url(./images/bg.gif) This one tries http://localhost/kcpage/css/images/bg.gif. url(httPL//localhost/kcpage/images/bg.gif) This one you've mistyped http:, so it's trying http://localhost/kcpage/css/httPL//localhost/kcpage/images/bg.gif. Assuming you typed it correctly in the sheet the first time, it should have worked. url(//localhost/kcpage/images/bg.gif) This one is using http://localhost/kcpage/css//localhost/kcpage/images/bg.gif As Tim Snadden wrote, ../images/bg.gif will work. As will http://localhost/kcpage/images/bg.gif. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
Tim Snadden wrote:
All paths are relative to the CSS file. To go up a directory use '..'. So...
url(../images/bg.gif)
Tim, thanks for that. You and another person that mailed me directly
said the same thing, so I suspect you are correct.
Unfortunately it doesn't seem to work for me - I might be messing up
something else.
In messing with it, if I modify the body tag in the html, then this works:
body style=background-image: url(images/bg.gif);
Since I include the css sheet in the same level, I would have thought
the CSS should resolve similarly and that
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
Should work, but that was a fail as well.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
In messing with it, if I modify the body tag in the html, then this
works:
body style=background-image: url(images/bg.gif);
When you include it here, the path is relative to the HTML page, so that works.
Since I include the css sheet in the same level, I would have thought
the CSS should resolve similarly and that
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.gif);
When you include it here, the path is relative to the CSS file (NOT the HTML
page), so it does not work.
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
Should work, but that was a fail as well.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
Try this path in the style sheet:
background-image: url(/kcpage/images/bg.gif);
On 11/1/2010 3:30 PM, MikeB wrote:
Hello, I'm pretty new at alll of this and ran into something I can't
resolve.
I have a webpage at:
http://localhost/kcpage/index.php
On my server (localhost) my folder structure is:
www:
-kcpage(folder)
--index.php
--css (folder)
--images(folder)
In my index.php I include my css stylesheet as follows in the head
section:
link rel=stylesheet type=text/css href=css/style.css /
I also include a logo as follows:
img src=images/logo.gif / This image displays just fine.
In my css stylesheet I have:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(images/bg.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
Try as I might, I cannot figure out how to specify the url to make the
image appear as background on my page.
I tried:
url(bg.gif)
url(/images/bg.gif)
url(./images/bg.gif)
url(httPL//localhost/kcpage/images/bg.gif)
url(//localhost/kcpage/images/bg.gif)
Can someone please tell me how to specify the url in the stylesheet to
pick up the background image?
Thanks.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
Climis, Tim wrote:
url(httPL//localhost/kcpage/images/bg.gif)
This one you've mistyped http:, so it's trying
http://localhost/kcpage/css/httPL//localhost/kcpage/images/bg.gif. Assuming
you typed it correctly in the sheet the first time, it should have worked.
Yep, that was a typo - sorry.
url(//localhost/kcpage/images/bg.gif)
This one is using http://localhost/kcpage/css//localhost/kcpage/images/bg.gif
As Tim Snadden wrote, ../images/bg.gif will work. As will
http://localhost/kcpage/images/bg.gif.
Ack! but it doesn't :( not even for the absolute URL:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(http://localhost/kcpage/images/bg.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
background-color: #001040;
margin: 0px;
color: #202060;
}
I'm now down to using the simplest html I can:
html
head
link rel=stylesheet type=text/css href=css/style.css /
titleTest page/title
/head
body
img src=images/logo.gif alt=logo/
h2Hello Word/h2
Some text follows here.
/body
/html
And I just can't make it work.
OK.
I think there's a problem with something else in the style sheet. If I
have only the body tag in a separate style sheet it works. :(
Back to the drawing board. :(
And sorry to have wasted your time, but I would probably not have found
the ../ relative url on my own.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Noob: relative URL specification in CSS
I'm now down to using the simplest html I can: html head link rel=stylesheet type=text/css href=css/style.css / titleTest page/title /head body - should be body img src=images/logo.gif alt=logo/ h2Hello Word/h2 Some text follows here. /body /html And I just can't make it work. Uh, is this a straight copy and paste? Have a look at your opening body tag, fix that and see if that fixes your problem. Sometimes the css isn't the problem :) Cheers, Rob __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
