|
|
Posted by Jonathan N. Little on 11/04/07 02:14
Cristian wrote:
> On 3 nov, 21:16, richard <uan...@spam.not> wrote:
>> On Sun, 04 Nov 2007 00:08:59 -0000, Cristian wrote:
>>> Hello!
>>> I have an image in a DIV#logo that is contained within a DIV.
>>> <BODY>
>>> <DIV ID="container">
>>> <DIV ID="logo">
>>> <IMG SRC="url">
>>> </DIV>
>>> <-- other DIVs and content here -->
>>> </DIV>
>>> <BODY>
>>> I want to set an image background to the DIV#logo. This is the code I
>>> am using:
>>> div#logo {
>>> background: url(url.jpg) red;
>>> }
>>> But the background image won't show up. I can see the red background
>>> color. I've taken the image in the HTML away, I've added padding to
>>> DIV#logo to see if the background image appears, but nothing happens.
>>> I hope someone can help me.
>>> Thanks in advance!
>> http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image
>>
>> Something simple you failed to recall from the instructions.
>> We have all been there done that so don't worry about it.
>
> I added the ' to the URL (I usually don't forget to add it), but it
> didn't cause any effect. After that, I added an internal css like
> this:
Because quotes are not required unless there are embedded spaces in the URL.
>
> <style type="text/css">
> div#logo
> {
> background-image:
> url('dat/img/corners.jpg');
>
> }
> </style>
>
> And it Worked!
> Now, my question is, Why the external css did not work, but the
> internal did? they do the same.
>
> EXTERNAL
>
> div#logo {
> background-image: url('dat/img/corners.jpg') red;
> }
>
> INTERNAL
>
> <style type="text/css">
> div#logo
> {
> background-image:
> url('dat/img/corners.jpg');
>
> }
> </style>
>
Because I bet your external stylesheet is *not* in the same folder as
your document. As rf (Richard) correctly suggested the relative path in
the stylesheet for the image will be relative to the stylesheet's
location not the document. It would be easy to diagnose if you provided
a URL to your page. But since you didn't I will speculate that your
page at:
www.example.com/troubled.html
And the image is at:
www.example.com/dat/img/corners.jpg
And the stylesheet:
www.example.com/somefolder/stylesheet.css
If the 'stylesheet.css' has:
background-image: url(dat/img/corners.jpg);
Then that would translate:
www.example.com/somefolder/dat/img/corners.jpg
And that would fail. But if you paste the code into your page in a STYLE
element then it would be relative from the page and translate:
www.example.com/dat/img/corners.jpg
And it would work.
If you want it work in the *external* worksheet use the image url
relative to your document root. For my speculative example:
background-image: url(/dat/img/corners.jpg);
^
NOTE the leading '/' in the URL.
--
Take care,
Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
[Back to original message]
|