Background image in node content

Question

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.

Example:

Answer 1

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:

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.

Answer 2

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

node--receipes.tpl.php

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... :)

Answer 3

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.

Answer 4

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">
  </div>
</div>