Member Avatar for nikk8a

Hi,

In my css file, I want to provide url to some resources which belong to some other project. The context of that project can be changing.
Is there a way in css, by hwich I can provide a url with a variable or with property pointing to the dynamic context.
Maybe something like:

.menu-scroll-bottom{
    background-image:url("${request.getContextPath()}-static/resources/images/mini-b.gif");
    }

or something like:

.menu-scroll-bottom{
    background-image:url(<%=request.getContextPath()%>-static/resources/images/mini-b.gif);
    }

I have both of the above, but none works.
Is there any way to solve this?

Thanks in advance

  • 3 Contributors
  • 3 Replies
  • 926 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Eng. Hadi

Dani AI

Generated

Short diagnosis: the CSS file you linked is being served as a static asset, so server-side expressions inside it are never executed. That is why the snippets you tried did not work. and are both on the right track: you either need the server to emit the final CSS at runtime, or you must inject the dynamic part into the HTML (not the static .css) and let the browser assemble the final URL.

Practical options (pick one):

  1. Serve the stylesheet dynamically (JSP/servlet, PHP, etc.). Make the file output text/css and let the template engine write the context path. Example (JSP): 
<%@ page contentType="text/css; charset=UTF-8" %>

/* generated CSS */
.menu-scroll-bottom {
  background-image: url("${pageContext.request.contextPath}/static/resources/images/mini-b.gif");
}

Link to that generated resource from your page. Note: dynamic CSS can reduce CDN/browser caching unless you set cache headers appropriately.

  1. Keep an external static CSS and inject only the variable part into the HTML. Two lightweight ways:
  • CSS custom property set in the page head (server prints the path once), then external CSS reads it:
    
<!-- in the HTML template -->
<style>:root { --menu-bg: url("/myapp/static/resources/images/mini-b.gif"); }</style>

<!-- in your static CSS -->
.menu-scroll-bottom { background-image: var(--menu-bg); }

- Or set a data attribute with the base path and use a tiny script to set the background-image at runtime:

<body data-base-path="/myapp">
<script>
var base = document.body.getAttribute('data-base-path') || '';
document.querySelectorAll('.menu-scroll-bottom').forEach(function(el){
el.style.backgroundImage = 'url(' + base + '/static/resources/images/mini-b.gif)';
});
</script>



3) Move shared images to a stable host/CDN or a well-known root path so CSS can use a fixed absolute or root-relative URL.

Quick trade-offs: preprocessors (LESS/Sass) help at build time but not if the context path truly changes at runtime; dynamic CSS (JSP) gives runtime values but can hurt caching; injecting a single value into HTML (CSS variable or small script) is usually the simplest, cache-friendly compromise.

Recommended Answers

All 3 Replies

Member Avatar for Eng. Hadi

Hello .. It seems that you have to use a dynamic stylesheet language like LESS http://lesscss.org/ Check it out , it may solve the problem.

Member Avatar for BMXDad

No, but you could use a server side link. But unless you own the server thats not going to help you much.

Member Avatar for Eng. Hadi

@ggamble
Do you mean by "server side link" a link generated by a server-side language like PHP. If so the image name should be a variable. But the problem is that the file is a (.css) file and couldn't be parsed by the php engine. So please clarify your idea to understand it :) .

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.