混合handlebars.js和CSS - 随机背景图像？

Question

我想设置一个随机生成的背景图像.

我正在使用Meteor并调用Flickr API来提供一个随机图像URL,我想将其设置为我的背景图像.

从我的阅读,似乎CSS现在是设置背景图像的推荐方法.有没有办法将动态生成的URL注入CSS？我似乎无法找到显示Handlebars.js和CSS混合的示例 - 这可能吗？或者我应该避免CSS并使用传统的HTML方式设置背景图像？

我一直在尝试两种不同的策略:

1)使用通过把手注入的url在HTML中创建CSS属性 - 但我似乎无法将CSS属性与Handlebars连接起来.

2)我尝试的另一种方法是将CSS属性创建为模板代码中的变量,并通过Handlebars将其返回到HTML中,如下所示:

Template.backgroundImage.background = function(){
//runs function to generate url and add to Session object   
    FlickrRandomPhotoFromSet(setID);
//create variable with html and css attribute concatenated to url
var backgroundImage = '<div style="background-image: url('+Session.get("RandomURL")+')"></div>';
//return resultant variable to HTML via template
    return backgroundImage;
};

然后在HTML中我插入了以下内容:

<template name="backgroundImage">
    {{background}}
</template>

Answer 1

这种方法最终为我工作:

我正在使用我定义为模板的内部样式表.更新网址以匹配随机生成的网址:

<template name="backgroundImage">
  <style>
  body {
  background-image:url({{background}});
  background-repeat: no-repeat;
  background-position: right top;
  }
  </style>