Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Drupal BackgroundField Module Configuration Manual

Parent Feed: 

Yesterday I wrote a blog post on how to configure a Drupal module called Background Images Formatter, which is part 2 of the Drupal Background Images Module Configuration Manual. Today I'll continue with part 3 with a module called BackgroundField. Then tomorrow I'll finally reveal how to create clickable background takeover ads.

UPDATE (May 8, 2016): Clickable Background Takeover Ads (Part 4)

BackgroundField is probably the best alternative solution to using Background Images & Background Images Formatter, because this one module does the job much more simpler than using two.

I) The main reason why anyone would want to use this module would be my use case where I run a membership website and want my members to be able to upload background images, because the Background Images module only allows people with admin access (specifically to admin/content/background-images) to enable background images at all.

Other examples can be found in the description of the home page of BackgroundField.

II) If you don't run a membership website and just want to upload background images as an admin, you should use Background Images if you want to upload it via the admin interface, or Background Images Formatter (or BackgroundField) if you want to upload it while creating each node.

Ok, so here we go:

0) (Optional) Apply the following two patches that will take care of a couple of minor error messages: https://www.drupal.org/node/1841978 (#19) & https://www.drupal.org/node/2720959 (#2, created by yours truly! :D)

1) Install and enable the BackgroundField module.

2) Go to whichever content type you want to apply the background image to, click the "MANAGE FIELDS" tab and create a new field for the background image: admin/structure/types/manage/CONTENT-TYPE/fields

If you noticed, the biggest difference between this module and Background Images is that this module actually allows you to choose a "FIELD TYPE" called "BackgroundField" vs. step #2 of the Drupal Background Images Module Configuration Manual.

And yet again, ignore the fact that the "CSS Selector" field here once again has the default entry as "body", which most likely will NOT work. The correct entry for Bartik is "#main-wrapper", and for Bootstrap it is ".main-container".

3) (Optional) If you want to enable background images for user accounts, go to admin/config/people/accounts/fields. Then the rest is pretty much the same thing as step #2.

And that's really it for this module. Go create a node with a background image, and it should just show up magically. Now feel free to go back and play around with other settings. Anyway, this is now my favorite module for creating background images due to its simplicity.

If you want yet another alternative solution for creating background images, there is a module called Dynamic Background. The advantage of using this module is that it's most likely the most flexible of all the modules, as you can do more things than all the others. But the disadvantage is that you'll need to enable a total of at least three modules to get the same job done as BackgroundField: "Dynamic background" (the main module itself), "Dynamic background node" (which does the same thing as step #2) & "Dynamic background user" (which does the same thing as step #3)

Whatever module you decide to use, my advice is to choose wisely in the beginning. Since each module does things a bit differently, it might not be simple to switch between modules later on. So make sure you know exactly how you will be uploading background images before making up your mind.

Now stay tuned, as my next blog post will finally cover part 4 on an awesome topic regarding how to create clickable background takeover ads.

P.S. Sometimes my blog posts help me get out of my comfort zone and discover new modules. This is one of those modules, which I will most likely switch to from Background Images & Background Images Formatter, since using one module is better than using two for my own use case.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web