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.
- Download the extension or install it directly from this link
- Select which CSS element you want to style (on this page the <div class="logoheader"> element is styled)
- Edit the module details
- select a visible position (note - no HTML will be rendered at this position)
- set status to published, access to public
- the styling will be visible only at locations you selected here
- 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
- 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
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.