CODEWITHSUNDEEP
cssjsp
Alex Barnes
Alex Barnes

Reputation: 7218

Use CSS referenced images in JSP pages

I am writing a java servlet (struts/JSP etc). I am trying to style a progress bar using CSS in a JSP page but get this error when using chrome's developer tools:

Resource interpreted as image but transferred with MIME type text/plain.

<%@ include file="../include/css/default.css" %>

And in the CSS file:

background:url(../images/bg_bar.gif) no-repeat 0 0;

Could anyone explain why this is and show how I can use this CSS in my page?

Upvotes: 0

Views: 3679

Answers (2)

bezmax
bezmax

Reputation: 26132

Ahh... I got where is your problem. You are including the css with @include, so it inserts the whole css file into your html code.

The result will look like this:

localhost:8080/GraphBuilder/yourpage.htm

<html>
...
<style>
.myId {
background:url(../images/bg_bar.gif) no-repeat 0 0;
}
</style>
...

Now, looking at the address of the page, where do you think will it try to find the image? Exactly, in localhost:8080/GraphBuilder/../images/bg_bar.gif -> localhost:8080/images/bg_bar.gif.

You have 2 options to solve it:

  1. Instead of @include, use simple <style type="text/css" src="include/css/default.css"/>. This will make it look for css in the path localhost:8080/GraphBuilder/include/css/default.css. And css will look for image in localhost:8080/GraphBuilder/include/css/../images/bg_bar.gif -> localhost:8080/GraphBuilder/include/css/images/bg_bar.gif.
  2. Leave everything as it is, but change the path in css file to 'include/images/bg_bar.gif'. However this solution is worse than the first one, as including css in html file sucks.

Upvotes: 2

bezmax
bezmax

Reputation: 26132

My guess is that you get an error page instead of the image. Try typing full path to the image in your browser and see if it works. That is: http://domain/app/include/images/bg_bar.gif

If you get an error - then your problem is that your images are not accessible to the public.

Upvotes: 0

Related Questions