Can You Reference Images from CSS Without Using Relative Paths

Can you reference images from css without using relative paths?

The way around /is/ possible.

The problem is that CSS files are static, so Play! does not do anything on them - except serving them to the clients.

Just make your css files into views, write a generic controller that takes the filename as a parameter and they will be served as Play! Templates.

something in the lines of (beware: PSEUDOCODE!):

ROUTE:

get /css/{filename}  Application.getCSS

CONTROLLER

class public void getCSS(filename)
{
     renderTemplate(filename);
}

Then in your css you can use any groovy template feature you want.
The installation path is available as http.path in the conf

This will be very inefficient though, so you will have to add nginx or similar frontend to do some caching and set high expiration values for those files.

I'm not sure if it's worth doing it just to avoid relative paths!

I definitely think that the relative path is better suited generic deployment, and you are more likely to break things with this dynamic absolute approach.

A better overall deployment strategy

Anothe important point is that if you do like absolute URLs, there's no problem.
I actually do too.

But when I deploy my web applications (be them play!, django, pure wsgi, or whatever else) I always put a web frontend.

Usually nginx.

This means that your play framework will be an upstream server, and you can do everything you want with the URLs on your :80 port - and manage several services with subdomains or subfolders...

but when you access your play application on its own port(s) everything will be absolute.

Finally, if you were deploying Play! as a war I would have the feeling you have chosen the wrong framework or the wrong deployment pattern! But then your jboss or whatever other application webserver will do some magic on the subfolders...

CSS background-image - What is the correct usage?

The path can either be full or relative (of course if the image is from another domain it must be full).

You don't need to use quotes in the URI; the syntax can either be:

background-image: url(image.jpg);

Or

background-image: url("image.jpg");

However, from W3:

Some characters appearing in an unquoted URI, such as parentheses, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '\(', '\)'.

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.

Solution to relative path to image in CSS file depending on what file that includes it

The only way is with absolute paths. This means that in your CSS you must define an absolute path for your images, for example:

 background-image: url(/images/image.png);

What's the problem? You need to know the absolute path where your folders are. For example, if you have this URL: http://localhost/myFolder/images/image.png, your CSS will be:

 background-image: url(/myFolder/images/image.png);

But when you upload it to a production server like this: http://myserver.com/images/image.png, your CSS must to change to something like this:

 background-image: url(/images/image.png);

So the best way is to develop in the same environment that your production server. This will be with the URL http://localhost/images/image.png (develop) and http://myserver.com/images/image.png (production).

Another way is to making friendly URLs, that avoids to you to make custom folders, and you can have all in one folder and the URLs will be rewrited by the server.

Good luck.

Do external CSS files with relative image paths reference external images?

According to the CSS Level 2 specification document, relative URIs are always resolved using the URI of the stylesheet which includes the path.

In order to create modular style sheets that are not dependent on the
absolute location of a resource, authors may use relative URIs. [...]
For CSS style sheets, the base URI is that of the style sheet, not
that of the source document.

Therefore, it will always be resolved to http://domain2.com/images/cute-kitten.gif on all browsers.

Relative path is not considered for background image configured in component css when ng serve Angular app

Relative paths in CSS should be relative to the base URL, not relative to the component within the src directory. Therefore remove the leading .. from the path but make sure you have the leading slash:

#div1 {
  background-image: url('/assets/images/videos/back.jpg');
}

#div2 {
  background-image: url('/assets/images/blogs/back.jpg');
}

Based on experimentation, I can see that when using a path relative to the source code, the CLI creates a copy of the referenced image and drops it at the root of the dist folder. This causes the dist folder look as follows:

/dist
  // This is the image that the CLI created 
  // and your component is referencing, but 
  // you want to reference the images in the
  // assets folder.
  back.jpg
  /assets
      /images
          /videos
              back.jpg
          /blogs
              back.jpg

GWT ClientBundle CSS doesn't use relative paths to reference images

1*
Use spriting as explained here

use @sprite and gwt-image in your my.css file

@sprite .myImage {
  gwt-image: 'image';
}

and inject them in your app using bundles

interface MyResources extends ClientBundle {
  @Source("image.png")
  ImageResource image();

  @Source("my.css");
  CssResource css();
}

It won't get you there to inject jQuery Css.

2*
A second option would be to write a little servlet which gives "direct url access" to your images, so you can keep the CSS as is.

Here is something I wrote to get CSS (not images) using Spring MVC. That should be enough to get the point. I'm using Spring's DispatcherServlet.

  private static final String CSS_PATH = "/path/to/my/css/resources/";
  private static final String CSS_EXT = ".css";
  private static final String CSS_CONTENT_TYPE = "text/css";

  @RequestMapping(value = "/resources/css", method = RequestMethod.GET)
  public void getCssResource(HttpServletResponse response, @RequestParam("name") String name) throws IOException {
    String path = CSS_PATH + name;
    InputStream is = SomeClassOnMyClassPath.class.getResourceAsStream(path + CSS_EXT);
    if (is != null) {
      flushResource(response, is, CSS_CONTENT_TYPE);
    }
  }

  private void flushResource(HttpServletResponse response, InputStream is, String contentType) throws IOException {
    DateTime expirationTime = new DateTime().plusDays(16);
    response.setContentType(contentType);
    response.setDateHeader("Expires", expirationTime.getMillis());
    IOUtils.copy(is, response.getOutputStream());
    response.flushBuffer();
  }

You can then get the CSS at the /resources/css?name=cssName url

Is a relative path in a CSS file relative to the CSS file?

Yes, it's relative to the .css

Here's an example layout:

Page:  page.htm ... does not matter where
CSS:   /resources/css/styles.css  
Image: /resources/images/image.jpg

CSS in styles.css:

div { background-image: url('../images/image.jpg');

Should image/css/javascript references from HTML use relative or absolute paths?

The answer is "it depends". But most of the time, the absolute path is probably best.

I use absolute paths where I am using templating, or if I am using Apache's mod_rewrite.

You might use a relative path if you had a page with an accompanying stylesheet that might be placed at different levels when it gets uploaded. i.e. You've written a page that will be used on many website, and some people might upload it to the root directory and some people might not - by using a relative path, as long as they upload the html file and css file together, it will work - whereas an absolute path wouldn't in this scenario.

---

Related Topics