6.0.2: What is the proper way to handle the CSS property "background-image"

Version 6.0.2

What is the proper way to handle the CSS property "background-image"?

For example, I have the following in a .css file:

.body {
background-image: url( /resources/top_body_bg.jpg );
}

This doesn't render the image in the browser, unless I have the context in the path, such as:

.body {
background-image: url( /mycontext/resources/top_body_bg.jpg );
}

However, when I add the context, 6.0.2 marks it as an error and notes "Cannot resolve file or web directory element or directory 'mycontext'"

Do I have a setting wrong?

How can I have just:

.body {
background-image: url( /resources/top_body_bg.jpg );
}

And still have the image render in the browser?

Thanks,

11 comments
Comment actions Permalink

You should use a path that is relative to the html/jsp/css file, like "top_body_bg.jpg". The absolute path that includes the context-path is gonna bite you anyway when context-path changes.

Sascha

0
Comment actions Permalink

The downside to that is that it will break when you move things around.

I usually use absolute, context-specific paths everywhere, but without hardcoding
the context.
There are two approaches:
1) The JSTL <c:url> tag for links/URLs
The downside is its verbosity: the 'syntax noise' quickly adds up for
larger pages.
2) At start of page:
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
After that, you can use paths like "$/foo/bar" everywhere.


0
Comment actions Permalink

The downside to that is that it will break when you move things around.


Hmm, it shouldn't. I've never tried this one actually, but as long as you use IDEA to move things around the paths should stay valid (and relative), although there have been bugs that either forgot to update the paths or inserted absolute ones.

BTW: Does IDEA recognize and update the filename built with <c:url> when moving the file?

Sascha

0
Comment actions Permalink

This is all wonderful feedback, however - this graphic file reference is inside a .css file, not on a .jsp page.

0
Comment actions Permalink

It doesn't matter, as long as the path you specify for the image is relative to your .css file. If the .css file is in / and the image is in /resources, this will work:

.body {
background-image: url( resources/top_body_bg.jpg );
}

Sascha

0
Comment actions Permalink

Hello Todd,

This is all wonderful feedback, however - this graphic file reference
is inside a .css file, not on a .jsp page.


You're right, I missed the CSS bit from your original message.
After reading it again I agree with the comments that Sascha gave.


0
Comment actions Permalink

That is not working for me. To be clear, the css works, but for some reason, I'm still receiving the error (same as listed above). Here's the css line in question:

background-image: url( /img/arrow_down.png );

And here's the error:

"Cannot resolve file or web directory element or directory 'img'"

The letters "img" are error highlighted in red.

Note, IDEA has no problem auto-completing the path to the file via CTRL+SPACE, but no matter what I do (no quotes, single quotes, double quotes), it balks at anything in my css file that takes the form of:

background-image: url( /img/arrow_down.png );

0
Comment actions Permalink

Hello jonathan,

That is not working for me. To be clear, the css works, but for some
reason, I'm still receiving the error (same as listed above). Here's
the css line in question:

background-image: url( /img/arrow_down.png );

And here's the error:

"Cannot resolve file or web directory element or directory 'img'"

The letters "img" are error highlighted in red.

Note, IDEA has no problem auto-completing the path to the file via
CTRL+SPACE, but no matter what I do (no quotes, single quotes, double
quotes), it balks at anything in my css file that takes the form of:

background-image: url( /img/arrow_down.png );


I'm using IDEA 7.0.4 EAP and FireFox 2.0.0.14. For me url("/img/picture.gif")
is not resolved in browser. Written in this form: url("img/picture.gif")
or in this: url("./img/picture.gif") it is resolved. So, the browser probably
consider the starting slash as the sign of "absolute path" or something.

IDEA does not show me error in any of listed cases. All CSS inspections are
turned On.

Anyway, maybe erasing the starting slash helps you?

Alexander.


0
Comment actions Permalink

Nope, erasing the starting slash does nothing for me. The only cases I've determined where IDEA does not give me an error are either a) the url references a file in the same directory (no preceding "/" or ".") or b) the url is absolute and starts with 'http://'. And I'll repeat for clarity: My problems isn't with getting the css to work, it's with IDEA's false positive error highlighting.

Any other ideas?

0
Comment actions Permalink

hi
my project has src folder with html & css files

src/trunk/www-ru/* - html
src/trunk/www-ru/css/ - css
src/trunk/www-ru/i/ - images

i see - validator error on line
.abc {
    background:url('/i/icons_8_black.png');
}

if i move folder i (from src/trunk/www-ru/i/) to folder src/i , validator don't show error.

how to resolve problem without moving "i" folder?

0
Comment actions Permalink

thanks
file / project sructure / modules / sourses

0

Please sign in to leave a comment.