By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,526 Members | 1,888 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,526 IT Pros & Developers. It's quick & easy.

background-image problem while using CSS for aspx page

P: n/a
I am using background-image attribute in a CSS file and linking the
CSS file to aspx page. But strangly, background-image attribute is not
working for relative URL.

e.g. If I apply following css
..navbar-background {
background-image: url(images/menubar.gif);
}

the image is not appearing on the page. It seems that IE is picking
the image path relative to aspx file (instead of CSS file!)

If i change the CSS to
..navbar-background {
background-image: url(http:\\myserver\cp\images\menubar.gif);
}
then it's working.
What is the problem here?? Can someone please explain?
[Note: I am using IE6]

regards,
Nilesh Dhakras.
Nov 18 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
Hi Nilesh,

try making the changes as follows. its the problem with the relative path i
assume that your images folder is in the root directory.

e.g. If I apply following css
..navbar-background {
background-image: url(~/images/menubar.gif);
}

HTH
Regards
Ashsih M Bhonkiya

"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
I am using background-image attribute in a CSS file and linking the
CSS file to aspx page. But strangly, background-image attribute is not
working for relative URL.

e.g. If I apply following css
.navbar-background {
background-image: url(images/menubar.gif);
}

the image is not appearing on the page. It seems that IE is picking
the image path relative to aspx file (instead of CSS file!)

If i change the CSS to
.navbar-background {
background-image: url(http:\\myserver\cp\images\menubar.gif);
}
then it's working.
What is the problem here?? Can someone please explain?
[Note: I am using IE6]

regards,
Nilesh Dhakras.

Nov 18 '05 #2

P: n/a
Hi, Nilesh Dhakras,

The paths should be relative to the .css file. Are you sure you are not
seeing a cached version of the .css (the one cached in the browser)? Try to
hit Ctrl+F5 to force the browser to request everything.

Also, make sure you don't have any error in the css style - if there is an
error you will not be shown any error messages, simply there will be no
styles applied to the control.

Hope this helps
Martin
"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
I am using background-image attribute in a CSS file and linking the
CSS file to aspx page. But strangly, background-image attribute is not
working for relative URL.

e.g. If I apply following css
.navbar-background {
background-image: url(images/menubar.gif);
}

the image is not appearing on the page. It seems that IE is picking
the image path relative to aspx file (instead of CSS file!)

If i change the CSS to
.navbar-background {
background-image: url(http:\\myserver\cp\images\menubar.gif);
}
then it's working.
What is the problem here?? Can someone please explain?
[Note: I am using IE6]

regards,
Nilesh Dhakras.

Nov 18 '05 #3

P: n/a
It's been my experience that the url property is always relative to the page
not the stylesheet.
I've checked both MSDN and W3C spec but they don't seem to discuss about the
url attribute in detail.

Jiho

"Martin Dechev" <de*******@hotmail.com> wrote in message
news:uk**************@TK2MSFTNGP09.phx.gbl...
Hi, Nilesh Dhakras,

The paths should be relative to the .css file. Are you sure you are not
seeing a cached version of the .css (the one cached in the browser)? Try to hit Ctrl+F5 to force the browser to request everything.

Also, make sure you don't have any error in the css style - if there is an
error you will not be shown any error messages, simply there will be no
styles applied to the control.

Hope this helps
Martin
"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
I am using background-image attribute in a CSS file and linking the
CSS file to aspx page. But strangly, background-image attribute is not
working for relative URL.

e.g. If I apply following css
.navbar-background {
background-image: url(images/menubar.gif);
}

the image is not appearing on the page. It seems that IE is picking
the image path relative to aspx file (instead of CSS file!)

If i change the CSS to
.navbar-background {
background-image: url(http:\\myserver\cp\images\menubar.gif);
}
then it's working.
What is the problem here?? Can someone please explain?
[Note: I am using IE6]

regards,
Nilesh Dhakras.


Nov 18 '05 #4

P: n/a
Well, it's mentioned in the CSS1 specifications:

http://www.w3.org/TR/REC-CSS1.html#url

Quote:
Partial URLs are interpreted relative to the source of the style sheet, not
relative to the document

Greetings
Martin
"Jiho Han" <ji******@infinityinfo.com> wrote in message
news:eb**************@TK2MSFTNGP12.phx.gbl...
It's been my experience that the url property is always relative to the page not the stylesheet.
I've checked both MSDN and W3C spec but they don't seem to discuss about the url attribute in detail.

Jiho

"Martin Dechev" <de*******@hotmail.com> wrote in message
news:uk**************@TK2MSFTNGP09.phx.gbl...
Hi, Nilesh Dhakras,

The paths should be relative to the .css file. Are you sure you are not
seeing a cached version of the .css (the one cached in the browser)? Try

to
hit Ctrl+F5 to force the browser to request everything.

Also, make sure you don't have any error in the css style - if there is an error you will not be shown any error messages, simply there will be no
styles applied to the control.

Hope this helps
Martin
"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
I am using background-image attribute in a CSS file and linking the
CSS file to aspx page. But strangly, background-image attribute is not
working for relative URL.

e.g. If I apply following css
.navbar-background {
background-image: url(images/menubar.gif);
}

the image is not appearing on the page. It seems that IE is picking
the image path relative to aspx file (instead of CSS file!)

If i change the CSS to
.navbar-background {
background-image: url(http:\\myserver\cp\images\menubar.gif);
}
then it's working.
What is the problem here?? Can someone please explain?
[Note: I am using IE6]

regards,
Nilesh Dhakras.



Nov 18 '05 #5

P: n/a
Hi Nilesh

I am sorry to provide this incorrect information in my last reply

actually the the paths should be relative to the .css file. and thats what the specifications says

"Well, it's mentioned in the CSS1 specifications
http://www.w3.org/TR/REC-CSS1.html#url

----- Ashish M Bhonkiya wrote: ----

Hi Nilesh

try making the changes as follows. its the problem with the relative path
assume that your images folder is in the root directory

e.g. If I apply following cs
..navbar-background
background-image: url(~/images/menubar.gif)
HT
Regard
Ashsih M Bhonkiy

"Nilesh" <dh*******@hotmail.com> wrote in messag
news:ae**************************@posting.google.c om..
I am using background-image attribute in a CSS file and linking th
CSS file to aspx page. But strangly, background-image attribute is no
working for relative URL
e.g. If I apply following cs

.navbar-background
background-image: url(images/menubar.gif)
the image is not appearing on the page. It seems that IE is pickin

the image path relative to aspx file (instead of CSS file!
If i change the CSS t

.navbar-background
background-image: url(http:\\myserver\cp\images\menubar.gif)

then it's working
What is the problem here?? Can someone please explain
[Note: I am using IE6
regards

Nilesh Dhakras


Nov 18 '05 #6

P: n/a
Hi Martin,

Thanks a lot for your inputs. But I am really facing strange behavior.

I have a base CSS which is having this class
..navbar-background {
background-image: url(images/menubar.gif);
}
The base CSS is working just as expected (and as you explained). The
images are getting picted relative to the CSS file's directory (and
not the page's directory).

But when I create another custom CSS, and override this class in that
CSS, then the problem comes. My custom CSS has exactly same class but
with diff path (as it's placed in a diff directory than the base CSS).
In the page's <HEAD> section, I am mentioning the custion CSS after
the base CSS (to override). But images are not getting picked.

Does background-image attribute have any problem with such
overriding??

Thanks a lot,
Nilesh Dhakras


"Martin Dechev" <de*******@hotmail.com> wrote in message news:<#j**************@tk2msftngp13.phx.gbl>...
Well, it's mentioned in the CSS1 specifications:

http://www.w3.org/TR/REC-CSS1.html#url

Quote:
Partial URLs are interpreted relative to the source of the style sheet, not
relative to the document

Greetings
Martin
"Jiho Han" <ji******@infinityinfo.com> wrote in message
news:eb**************@TK2MSFTNGP12.phx.gbl...
It's been my experience that the url property is always relative to the

page
not the stylesheet.
I've checked both MSDN and W3C spec but they don't seem to discuss about

the
url attribute in detail.

Jiho

"Martin Dechev" <de*******@hotmail.com> wrote in message
news:uk**************@TK2MSFTNGP09.phx.gbl...
Hi, Nilesh Dhakras,

The paths should be relative to the .css file. Are you sure you are not
seeing a cached version of the .css (the one cached in the browser)? Try to hit Ctrl+F5 to force the browser to request everything.

Also, make sure you don't have any error in the css style - if there is an error you will not be shown any error messages, simply there will be no
styles applied to the control.

Hope this helps
Martin
"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
> I am using background-image attribute in a CSS file and linking the
> CSS file to aspx page. But strangly, background-image attribute is not
> working for relative URL.
>
> e.g. If I apply following css
> .navbar-background {
> background-image: url(images/menubar.gif);
> }
>
> the image is not appearing on the page. It seems that IE is picking
> the image path relative to aspx file (instead of CSS file!)
>
> If i change the CSS to
> .navbar-background {
> background-image: url(http:\\myserver\cp\images\menubar.gif);
> }
> then it's working.
> What is the problem here?? Can someone please explain?
> [Note: I am using IE6]
>
> regards,
> Nilesh Dhakras.


Nov 18 '05 #7

P: n/a
Hi, Nilesh,

You can import the "base" stylesheet in the "custom" like this:

@import url(../styles/base.css);

and then you will be guaranteed to override the class definitions of the
"base" css.

Another thing you can try is to set the background-image as "! important" in
the "custom" css:

..navbar-background {
background-image: url(images/menubar.gif) ! important;
}

but I haven't try this myself. The first method is the official
recommendation for overriding.

Hope this helps
Martin
"Nilesh" <dh*******@hotmail.com> wrote in message
news:ae**************************@posting.google.c om...
Hi Martin,

Thanks a lot for your inputs. But I am really facing strange behavior.

I have a base CSS which is having this class
.navbar-background {
background-image: url(images/menubar.gif);
}
The base CSS is working just as expected (and as you explained). The
images are getting picted relative to the CSS file's directory (and
not the page's directory).

But when I create another custom CSS, and override this class in that
CSS, then the problem comes. My custom CSS has exactly same class but
with diff path (as it's placed in a diff directory than the base CSS).
In the page's <HEAD> section, I am mentioning the custion CSS after
the base CSS (to override). But images are not getting picked.

Does background-image attribute have any problem with such
overriding??

Thanks a lot,
Nilesh Dhakras


"Martin Dechev" <de*******@hotmail.com> wrote in message

news:<#j**************@tk2msftngp13.phx.gbl>...
Well, it's mentioned in the CSS1 specifications:

http://www.w3.org/TR/REC-CSS1.html#url

Quote:
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document

Greetings
Martin
"Jiho Han" <ji******@infinityinfo.com> wrote in message
news:eb**************@TK2MSFTNGP12.phx.gbl...
It's been my experience that the url property is always relative to the
page
not the stylesheet.
I've checked both MSDN and W3C spec but they don't seem to discuss
about the
url attribute in detail.

Jiho

"Martin Dechev" <de*******@hotmail.com> wrote in message
news:uk**************@TK2MSFTNGP09.phx.gbl...
> Hi, Nilesh Dhakras,
>
> The paths should be relative to the .css file. Are you sure you are
not > seeing a cached version of the .css (the one cached in the browser)? Try to
> hit Ctrl+F5 to force the browser to request everything.
>
> Also, make sure you don't have any error in the css style - if there
is an
> error you will not be shown any error messages, simply there will be

no > styles applied to the control.
>
> Hope this helps
> Martin
> "Nilesh" <dh*******@hotmail.com> wrote in message
> news:ae**************************@posting.google.c om...
> > I am using background-image attribute in a CSS file and linking the > > CSS file to aspx page. But strangly, background-image attribute is not > > working for relative URL.
> >
> > e.g. If I apply following css
> > .navbar-background {
> > background-image: url(images/menubar.gif);
> > }
> >
> > the image is not appearing on the page. It seems that IE is picking > > the image path relative to aspx file (instead of CSS file!)
> >
> > If i change the CSS to
> > .navbar-background {
> > background-image: url(http:\\myserver\cp\images\menubar.gif);
> > }
> > then it's working.
> > What is the problem here?? Can someone please explain?
> > [Note: I am using IE6]
> >
> > regards,
> > Nilesh Dhakras.
>
>

Nov 18 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.