I like to implement this codepen into drupal but the images in the background should come from a ctype within Drupal.

The codepen example: http://codepen.io/AmeliaBR/pen/myPBNg

So basically how to get this line dynamic in a page?

article {
  background: url(https://foo.com/fooimage.jpg) no-repeat center; 

Can you point me to the good direction? Is there a module which support this? What tags should I look?

  • Where do you want to display the background image? on a node page, on the front page,...?
    – Robin
    Mar 6, 2015 at 14:19
  • The background image should come in a node so in the basis I would like to use it as table background property. This node is displayed in a mini-panel which is displayed on a basic page. Also I would like to use it a slider of images and extend it with clickable text on top of it.
    – Justme
    Mar 6, 2015 at 21:31

2 Answers 2


You could use:

// replace this with the url from the node object
$imgURL = 'https://foo.com/fooimage.jpg';
$style  = 'article {';
$style .= 'background: url(' . $img_url . ') no-repeat center;';
$style .= '}';
drupal_add_css($style, array('type' => 'inline'));

For the $img_url though you need to fond out how to get the image url. You would need to load the node using node_load() then use dsm() from the Devel module or just use print_r() to display the field array.


I'm assuming by the "article" css that you want the background image on the on the markup which wraps the content in a node.tpl.php. You can add the style attribute directly to the attributes array in a node preprocess. This example also gets the path to a specific image style for control over the image.

This would go in your template.php with the proper names swapped out to pull in your specific image field and image style.

 * Override or insert variables into the node templates.
 * @param $variables
 *   An array of variables to pass to the theme template.
 * @param $hook
 *   The name of the template being rendered ("node" in this case.)
function THEMENAME_preprocess_node(&$variables, $hook) {
  $type = $variables['type'];
  $view_mode = $variables['view_mode'];

  switch ($type) {
      // Ensure we only effect the node page
      if ($view_mode == 'full' && node_is_page($variables['node'])) {

         // Adjust to your specific image field. 
         // This may be different apart from swapping field names. 
         // Use Devel module and dpm($variables); to find your field's uri in the $variables array.
         $field_uri = $variables['FIELD_MACHINE_NAME'][0]['uri'];

        // Assuming you'll have an image style for it. Enter the machine name in here.
        $image_url = image_style_url('IMAGE_STYLE_MACHINE_NAME', $field_uri);
        $variables['attributes_array']['style'] = 'background-image: url(' . $image_url . ');background-repeat: no-repeat;';


The switch statement is for code readability should you preprocess other node types in the future. Just add another case & break.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.