Guy 0

I have a CSS file that uses the url(/images/myimage.png) pattern. I want to read the location of the image out of a DB at runtime so wish to vary the value that is placed in the url() command. e.g. It could be url(http://localhost/images/myimage.png) during development but at runtime I might want the image to be on a sub-domain such as url(http://images.mysite.com/myimage.png).

The way that I do this with images that are referenced in web pages is to pull the image "base" location from a configuration table and apply that. How would I "inject" that base into the url() command in a CSS file?

4 answers

1
point
This was chosen as the best answer

The central point of your issue, it seems to me, is using a separate subdomain for images (and as we all know, there are lots of reasons you may want to do that). Unfortunately, relative URLs won't work because there's no relative syntax that says "starting from www.example.com, end up with images.example.com".

A couple of options for you:

  • (Recommended) Generate the CSS as part of your build process. Whatever technology you use to package and deploy your app, have one of the steps be to create the "release" CSS files from "source" CSS files that use a token for the base path of the images. I don't know what your platform is, but this is a trivial sed script, for instance (*nix platforms). (And you can get sed for Windows as well, or it's easy enough to do this with a shell script [written in JavaScript if you like] and run via cscript.exe.)

  • [Added with edit] Leave the url portion out of the CSS file entirely and then add it in via a in-document style tag in each returned HTML document. This assumes you're already dynamically generating the returned documents; otherwise it's adding (perhaps substantial) overhead. But if the relevant style is only used on dynamic pages, this might be an acceptable approach.

  • Generate the CSS on the fly using server-side scripting. I don't recommend this, it's a waste of runtime resources.

  • Leave the url out of the rule, ensuring that the background color is appropriate for when the image isn't there (but then, that's good practice anyway), and then add it after-the-fact with JavaScript. This isn't a great idea for several reasons, not least that your site won't look quite right if the user doesn't have JavaScript enabled. But it's possible. There is an array of styleSheet objects (document.styleSheets), each of which contains an array of rules (cssRules on some browsers, rules on IE), each of which has a style member like the one on individual elements -- which is read/write. For example, here's some code that makes the first style sheet's first rule's font-weight rule "bold". But again, I wouldn't recommend this.

Answered over 9 years ago by T.J. Crowder
  • In the end I did option 3 (generate CSS on the fly). This is a one-off hit when the server side starts up and then the CSS is cached in memory and it's as efficient (if not more) as serving it off disk. Thanks for your help. Guy over 9 years ago
  • If you're sure it's getting properly cached on the server (not regenerated every time), that's great! (And even if it is, it's probably not *that* big a hit...) T.J. Crowder over 9 years ago
o.k.w 2355
0
points

If the page or the CSS file is hosted in the same domain name as that of the image, you can then use relative url instead of an absolute one.

Say the CSS file is at 'http://domain/css/site.css" and the image is at 'http://domain/images/image.png", you can simple set the url of the image as url('../images/image.png'). In this case, you don't have to bother about the location or domain (be it localhost or anything).

If you really want (which I stringly wouldn't recommend) to assign the image source during runtime based on a server-side assignment, you can do it via javascript but you will not be able to assign it to the CSS class, it has to be targetted at specific elements.

E.g. the image is for the background of a <DIV> element:

<div id='mainContent'>
 some content....
</div>

CSS:

#mainContent { background-image: url(http://mydomain/images/myImage.png); }

Script:

var myDiv = document.getElementById('mainContent');
myDiv.backgroundImage = myDiv.backgroundImage.replace('mydomain', '{myDomain}');

Depending on the server-side script supported (php, asp etc), you will then replace it with the corresponding representation, e.g. <%=myDomain%> or <?php echo myDomain; ?>

The above javascipt can be achieved with jQuery with ease too. You can target specifc CSS selectors (id, class or element). E.g.:

   var myClass = $('.className');
   myClass.css('background-image', myClass.css('background-image').replace('mydomain', '{myDomain}');
Answered over 9 years ago by o.k.w
  • You **can** actually change style rules with client-side JavaScript (there are slight browser differences and library support for it isn't very good, but there is a `styleSheet` object for each style sheet which contains the rules in a `cssRules` or `rules` array), so he's not limited to doing this to specific elements. But (as you said) doing it after-the-fact at runtime with JavaScript doesn't seem like a good solution. T.J. Crowder over 9 years ago
0
points

You could also add the image url as an inline style in your html, using whatever server side language is generating the page.

It's what I do.

e.g.

<div class="image-from-db" style="background: url('<?php echo $pathtoimage; ?>/<?php echo $image-name; ?>.jpg')"></div>

(mangled php for example only!)

you can style the main image parameters in your CSS file and then change the image dynamically at run time.

Answered over 9 years ago by Tony Crockford
Mottie 1134
0
points

Have you looked at HTML's <base> tag? I messed around with the example page and it does appear to work with backgorund images.

Answered over 9 years ago by Mottie