I am trying to create a custom welcome front page, it should contain two parts (left block and right block).

Each block has a background image (editor can upload), a logo (1 logo for each block), a description text...

Creating a new content type, is not a good idea in my opinion, because I don't like editors to add as much as they want nodes of that content type, so it should be only one content the editor can edit it each time he want to edit the background or logo...

I am thinking of creating a new setting form for this specific front page content containing those fields in a custom module. In this case, can I use picture module to make the background load a responsive image and not the default one uploaded by the editor ?

Thanks in advance.

2 Answers 2


In your case, yes you can create settings form, where admin will load background images, logo and enter description. But why you want use picture module? You can define new variables in hook preprocess_page for front page. Where in variable you put url to background image, url to logo, descriptions. After in front page template file, set url background to our block, logo and place descriptions. Finally add styles to block class or id in css file for align background at the block. For this you can use something like this:

.your-class {
    background: transparent url("path/to/background.jpg") no-repeat scroll 50% 50% / cover;
    width: 100%;

background url you add in template. I write path to url in code for quick example, you can place this code in some div, add correct url and see result.


I understand that:

  • Your key reason for not considering a content type is that you wish only one of this content type to be added to the site.
  • It is the intention that all of the content for the homepage is to be editable.

I would suggest that using a content type may still be a suitable approach: by virtue of not granting any role the "create new [content type x] permission", you ensure that the only type of user who could add new homepages would be the "administrator role" which you have set - a role which you won't have given to content editors.

For the blocks with background images, you might wish to consider use of the field_collection module to create sets of grouped fields; you can template field collections, allowing you to create an element with a background image and other field outputs contained within that element, for example. Ref http://www.drupalcontrib.org/api/drupal/contributions!field_collection!field-collection-item.tpl.php/7 for templating a field collection item. (If you prefer to use the paragraphs module, an equivalent approach would apply.)

The key thing here is that when you create your templates, you can output the file names of the editor-uploaded background images (e.g. a small inline CSS block), and ensure that you make use of the background-size property (you want "cover"). Set the position of the background images depending on how you'd like the visual effect of the responsive behaviour to work.

  • For example, 50% 50% will keep the centre of the image in the centre of the available area, while 0 0 would pin the top left corner to the top left of the area.

(The Picture module is aimed at embedding responsive content images, rather than for background images, so would not help you to achieve what I understand you're trying to do.)

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.