Question

I’m looking to create a content type which includes a field for an image file – simple enough. However, I want this image file to be displayed as a background-image. Do I have to create a custom node.tpl and include the image source in an inline style="background: url(sites/all/themes/theme/images/image.png);", or is there a more elegant way to do this, possibly including writing to a stylesheet from the field using JavaScript?

Answer 1

You can use drupal_add_css in a hook_node_view function, node preprocess script, or node template to add a style directly:

$css = "#bg-img { 
  background: url(/sites/all/themes/theme/images/image.png) left top no-repeat; 
};"
drupal_add_css($css, 'inline');

Or, you can use a drupal setting and then reference it in a jquery script; look up drupal_add_js usage & examples with the ‘setting’ option:

drupal_add_js(array("moduleName" => array('bgImg' => $absolute_url)), 'setting');

Reference in jQuery using Drupal.settings.moduleName[‘bgImg’]

IMO adjusting the node.tpl.php as you describe is perfectly sensible. Using drupal_add_css will let you set a background image on an element outside the node, eg the entire page. I’ve used jquery when I’ve needed more advanced positioning/resizing options.