You are here

Drupal Background Images Module Configuration Manual

During my San Diego Drupal Users Group lightning talk on March 8, I showed a brief demo of how background images can be made to be clickable via CSS, something that I once thought was impossible. But as I'll show you over the next few days, it actually is 100% possible, and I had a LOT of fun getting it to finally work exactly the way I want it. Today's tutorial will be part 1 of 4. My next three blog posts will cover the rest of the steps with the ultimate goal of creating clickable background takeover ads.

UPDATE (May 6, 2016): Drupal Background Images Formatter Module Configuration Manual (Part 2)
UPDATE (May 7, 2016): Drupal BackgroundField Module Configuration Manual (Part 3)
UPDATE (May 8, 2016): Clickable Background Takeover Ads (Part 4)

Before I begin, I want to make it clear that my four tutorials will focus on getting the necessary modules to be set up as quickly as possible. I'm sure there might be many different ways to use these wonderful modules, but I'll focus on my use case only, in which it'll eventually enable me to make money with my startup in the not-too-distant future. Here is an example of how I'm using Background Images for artists (you'll need a fairly large monitor to see the full effect):

If you click on the background image, it'll go to Beatport on a new page so that fans can make purchases of artists' latest music releases. Read on if you want to know how to do something like this.

Here we go with part 1, which involves five steps to set up Background Images:

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

2) Click the "MANAGE DISPLAY" tab and change the "FORMAT" of the background image to "<Hidden>", because we want this field to be shown as a background image instead of the field itself: admin/structure/types/manage/CONTENT-TYPE/display

3) Now it's time to install the Background Images module. Make sure to enable both "Background Image" (needed for step #4) & "Background Image UI" (needed for step #5).

The next two steps can be confusing, so just do exactly as I say first to at least get the module itself going. Then you can experiment later. :P

4) THE MOST IMPORTANT SETTING to set up is the "Selector" field here: admin/config/content/background-image

First, let's take care of the easy fields. Choose the right settings for "Node Type" (the type you want to apply the background image to from step #1) and "Node field" (the field for the background image from step #1). Then you might want to choose "Tiled (repeat)" for "Background Repeat" (to initially see as much of your screen displaying the background image, repeated horizontally and vertically).

You can ignore the rest for now and go back to focus on the dreaded "Selector" field. Pay special attention to this field, because entering wrong information here will most likely be the main reason why your background image won't show up at all. For example, I can tell you that if you use Bartik (the default theme for Drupal 7), the field should be "#main-wrapper". If you use a custom theme, you would have to figure out what this needs to be. To make matters worse, the screenshot used in the module's home page has the field as "body" (which most likely will NOT work at all for pretty much everybody lol):

Remember, you can't just put anything you want here. If you're not using Bartik, you'll need at least a basic knowledge of CSS to figure out what this field should be.

UPDATE (May 7, 2016): I'm currently switching ALL of my Drupal websites to use Bootstrap (a set of tutorials for which will also be available in the near future). Here is the correct field for this awesome theme: ".main-container"

5) But we're not done yet. The background image still won't show up until you complete this last step: admin/content/background-images

Just fill in the "PATH", choose the correct "BACKGROUND IMAGE NODE" for the resulting dropdown menu, and click "Save Changes". Then go to the page you just entered here to see the background image finally show up.

I personally don't use the module this way though, as this method is mainly for site admins. But this is how this module itself basically works. But! Don't worry too much, as I'll show you in part 2 how this can be easily overcome so that members of your site can use this module too.

And that's it. Stay tuned, as my next blog post will cover part 2. :)

P.S. Let me know in the comments if you're a total newbie especially regarding step #4, and I'll do my very best to help out as much as I can.

You are here