Background Styler

  • Print

Add a custom background image to any block level element, or display a random image. This module makes it easy to add background styles to your page, or one or more <div> elements. Choose either a single background image, or let a randomizer rotate it. The random image on this page is created by that extension.

Screenshots

  • admin
  • css

 Installation Instructions

  1. Download the extension or install it directly from this link
  2. Select which CSS element you want to style (on this page the <div class="logoheader"> element is styled)
  3. Edit the module details
    • select a visible position (note - no HTML will be rendered at this position)
    • set status to published, access to public
  4. Edit the module Menu Assignment
    • the styling will be visible only at locations you selected here
  5. Edit the module Basic Options
    • As "CSS Selector" choose the element you want to style:
      • any block level element by tag (e.g. "body" to add a body background image)
      • any specific class (e.g. ".logoheader" to style all elements having this class)
      • any specific element by ID (e.g. "#logoheader" to style the element having this ID)
    • If your background image contains transparent regions choose a matching background color
    • If you want a static background image select it from the image folder, or enter an external URI
  6. If you want to use the randomizer
    • upload all images you want to use to a subdirectory of the /images folder
    • set "use randomizer" to yes
    • select the appropriate folder (it will show up as soon as you created it)
    • for performance reasons set "use directory cache" to yes
  7. For best results enter the element width and height, in pixels (e.g. "1060px")

Frequently Answered Questions

  • The contents of the random folder have changed but I do not see the new images, or the URL of deleted images is still brought up?
    If you have set "Use directory cache" to "Yes" the directory contents are stored in a cache file in the image directory. Temporarily disable the directory cache, browse to the page containing the module to refresh the cache file, then re-enable the cache again.
  • I chose to use the directory cache but no cache file is created?
    The web server must have sufficient privileges (i.e. rights to write a file) in the chosen directory.