Is it possible to create a image file upload and then have that image appear as a background image within the "content" area of a particular page? I then want to put content (text) over the image. It would only be for a particular content type, but there is about 80 pages within this content type and each page/node would have its own background image.

To simplify, I have about 80 recipes. I have high-res images of each. I want the image to be the background and I would then have the specifics of the recipe on top of the background image.


enter image description here


I've used the Dynamic Background module, which has a whole set of advantages for setting up background which vary according to content. At that particular time I used the Context module, which gave me a varied set of options (including content type, path, taxonomy, etc.) and which is very extensible. For your recipes, you could combine with the taxonomy functionality for different types of recipes, or select a particular image for each.

While I don't like using modules for everything, if this is going to be part of your day to day use of the site, I recommend that you choose the simpler solution, so you can try and choose what works better for you.

When you install the Module, you can set up which images you want to use, style the image and the type of behaviour you want for the whole site:

Dynamic Background Configuration

Since you can assign it using CSS, you can set it up for the content area only (#region-content), or whatever indicator you define in Panels. So, you can combine the logic in panels to show a particular background for a content type, or whatever logic you want to assign.

Dynamic BAckground in Panels

  • Dynamic Background seems to be for the whole site and not just a particular content type. Also, with DB, can you have the background image appear in just the "content" area? Jun 13 '16 at 19:35
  • Using Dynamic Background worked for the most part. I have about 80 recipes and adding all 80 photos to the "background images" will be painful, but it works. I wish I could just upload one to each node. Jun 15 '16 at 19:28
  • It can be done, but you would have to fiddle with the node templates. Jun 15 '16 at 19:32

You should create a template file based on the content type.

For example, if you have "Receipe" content type then you should create tpl file based on content type's machine name that is


After creating this file you should clear cache.

In that tpl file you should get all the fields mention content type structure and using css you can apply desired page styling.

I hop it helps... :)

  • Im not against creating a particular template for this, I just dont know how I create the file upload for each one and have it apply as the background within the content area. Each recipe will have a diff image in the bckg. Jun 13 '16 at 19:37
  • The template that you will create will be available to that content type only. For example, you have added one article and one recipe, and you have created template for recipe than only content type with recipe will have different layout not with content with article type.
    – parth.k
    Jun 14 '16 at 12:55

Another option is to add a new CCK image field on Recipe content type. With that your content creator can easily manage the image background he/she want without going to other configuration page. This approach requires some coding. You can use preprocess_node then pass the variable to your node template where you print the background.

  • I like where you are going with this, but this might be a little heavy for my coding level. I guess I could try it, but its seems like it might be fraugh with errors on my side and never get working. Jun 13 '16 at 19:38

Another solution: Create a view and create your own views-view-fields.tpl.php - file. Set up a relation to your picture. Insert a path field with relationship to your picture and place the following code to your tpl.php.:

<div class="your_background_wrapper" style="background-image(url: <?php print $fields['your_path_field']->content; ?>);"
  <div class="your_content">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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