# Editing Images as a Backgrounds Slideshow

**Backgrounds** is one of the four [Album views](https://ngx-ramblers.org.uk/how-to/committee/images/albums) available - the others are [Carousel](https://ngx-ramblers.org.uk/how-to/committee/images/albums/carousel), [Gallery](https://ngx-ramblers.org.uk/how-to/committee/images/albums/gallery) and [Grid](https://ngx-ramblers.org.uk/how-to/committee/images/albums/grid). The Backgrounds view turns an album into a full-width slideshow where images cycle behind an overlay of title, intro text and (optionally) an event link and date. It is the view to choose when a page needs a single visually strong banner rather than a thumbnail grid - for example the landing of a Social Events page or a weekends-away summary. Above is an example of the Backgrounds view on the [East Kent Walking Group Social Events page](https://www.ekwg.co.uk/social).

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/cc4ea31d-ea91-45a2-a9ef-ebe2715c7112.jpeg)

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/ef14aeab-4ef4-4caa-96c2-96509b277294.jpeg)

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/2641f247-84f1-426e-803a-1bd81496a257.jpeg)

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/6f9dbd1e-1baf-46e3-8bed-cb45cf8cbf40.jpeg)

Unlike the other three views, Backgrounds does not draw its images from a normal album. Instead it cycles through the site's **system-wide background images** (configured under **Admin > System Settings > Backgrounds**). On the album row you then pick which of those images should appear in this particular slideshow, and set how the overlay text is coloured and positioned on top of them.

## Going into Edit Mode
* You need to be logged into the site as an administrator. If you haven't done that yet, [follow this guide](https://ngx-ramblers.org.uk/how-to/committee/logging-in).
* Visit the page that contains (or should contain) the backgrounds slideshow.
* Toggle **edit site** from the website header. The album row opens with the **Album Settings** tab pre-selected, as shown below:

![](https://ngx-ramblers.org.uk/api/aws/s3/site-content/562d456a-13d0-4049-994d-a1ed15bd3705.png)

*Album Settings tab when the album is configured as Backgrounds*

When the Album View is set to **Backgrounds** the Album Settings tab shows a dedicated set of controls that only apply to this view:

### Overlay text
* **Title Colour** and **Text Colour** - colour swatches used for the overlay title and intro text respectively. Pick colours that stay readable over every image in the slideshow.
* **Title Scale** - overall size multiplier for the title text. Scales run Small (1x), Medium (1.5x), Large (2x), Extra Large (3x), Huge (4x), Massive (5x), Giant (6x), Colossal (8x) and Logo (10x).
* **Text Scale** - same idea for the intro text underneath the title: Small (0.75x), Normal (1x), Medium (1.25x), Large (1.5x), Extra Large (2x), Huge (2.5x).

### Overlay position
* **Padding Top** - pixels of space above the overlay text block (0-300).
* **Padding Left** - pixels of space to the left of the overlay text block (0-300).
* **Photo Offset** - percent by which the background photo is shifted so the focal subject doesn't sit under the text (0-400).

### Event link and date
* **Show Event Link** - show the linked event title (e.g. *Spring Blossoms & Lunch on the Creek*) as part of the overlay.
* **Show Event Date** - show the event date next to or under the link.
* **Event Scale** - size multiplier for the event link/date when either is shown (Small, Normal, Medium, Large, Extra Large).

### Background images
* **Background Images** - a multi-select dropdown listing every background image configured in **Admin > System Settings > Backgrounds**. Tick the ones that should appear in this slideshow. The counter next to the label (e.g. *Background Images (3 of 10 selected)*) tells you how many you have picked out of the pool available.

## Linking the slideshow to an event
The **Show Event Link** and **Show Event Date** checkboxes only produce output if the album itself has been linked to an event. To do that:
1. Switch to the **Titles and Event Linking** tab.
2. Pick the **Link to Event Type** (e.g. *Social Events* or *Walks*).
3. In the event selector that appears, choose the specific event. The **Album Subtitle** will auto-fill with the event title and the date will populate automatically.
4. Return to the **Album Settings** tab and tick **Show Event Link** / **Show Event Date** to pull those values onto the slideshow overlay.

If no event is linked, the checkboxes are simply ignored.

## Switching an existing album to Backgrounds
1. Go into **edit site** mode.
2. Scroll to the album row. Above the preview there is a small toolbar with four icons - **backgrounds**, **carousel**, **gallery**, **grid**.
3. Click the **backgrounds** icon. The preview switches to a live slideshow and the Backgrounds-specific controls appear under the shared checkboxes.
4. Choose which background images the slideshow should cycle through, tune the overlay colours and padding, then **Save**.

For information on the other tabs **Titles and Event Linking**, **Cover Image and Introductory Text** and **Pre-Album Text** see the separate page on [editing album elements](https://ngx-ramblers.org.uk/how-to/committee/images/albums/editing-album-elements).