Background Wallpaper

Background Wallpaper lets site administrators upload an image and show it as the background wallpaper of selected pages: the front page, the pages of chosen content types, or any page matching a list of paths. Everything is configured from one settings form, with no theme changes or custom CSS needed.

Features

• Upload from the admin UI: jpg, jpeg, png, gif and webp images. A warning appears when the image is smaller than 1920 × 1080 pixels and is likely to look blurry.
• Choose where it appears:
  • the front page
  • the full page of nodes of selected content types (not their edit or delete forms)
  • any path, using the same syntax as block visibility, for example /about/* or <front>. Both the URL alias and the internal path are matched.
• Works with any theme: set the CSS selector of the element that receives the wallpaper. The default, #main, is Olivero's main content area; use body to cover the whole page.
• Display options: background size (cover, contain, auto), position, repeat, and attachment. The default fixed attachment sizes the image to the browser window, so it stays sharp on long pages.
• Color overlay: an optional semi-transparent color layer, with adjustable opacity, that keeps text on top of the wallpaper readable.
• Reset to defaults: one button removes the wallpaper and restores every setting.
• Cache-aware: changes show up immediately, including on pages served from Drupal's page caches.
• Tidy file handling: the current wallpaper is stored as a permanent file. A replaced or removed wallpaper, or the file left behind after uninstalling, is handed back to cron for cleanup unless something else uses it.

Requirements

Drupal 10.3 or later, or Drupal 11, with these core modules (enabled automatically):

• File
• Node
• Path Alias

Installation

Install as you would normally install a contributed Drupal module. For further information, see Installing Drupal Modules.

composer require drupal/background_wallpaper
drush pm:enable background_wallpaper

Configuration

1. Grant the Administer Background Wallpaper permission to the roles that should manage the wallpaper. Because the wallpaper appears on public pages, this permission is marked as restricted.
2. Go to Administration » Configuration » User interface » Background Wallpaper (/admin/config/background-wallpaper).
3. Upload the image. Use a landscape image of at least 1920 × 1080 pixels.
4. Under Pages, select the content types, the front page, and/or enter paths.
5. Optionally adjust the selector, display options and overlay under Display, then save.

Similar projects

• Background Image: a full-featured system for attaching background images to entities, with responsive image styles and per-entity overrides. Background Wallpaper is deliberately simpler: one site-wide wallpaper, configured from a single form.

Support

Report bugs and request features in the issue queue.