# Full Screen Cover Image

**URL:** https://meta.discourse.org/t/full-screen-cover-image/399690
**Category:** Theme component
**Created:** [April 1, 2026, 9:34am UTC](https://meta.discourse.org/t/full-screen-cover-image/399690 "2026-04-01T09:34:54Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![RGJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rgj/32/523185_2.png) [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [April 1, 2026, 9:34am UTC](https://meta.discourse.org/t/full-screen-cover-image/399690/1 "2026-04-01T09:34:54Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **Summary** | A Discourse theme component that displays a fullscreen cover image over the entire forum on page load. |
| 🛠 | **Repository** | [GitHub - communiteq/discourse-tc-fullscreen-coverimage · GitHub](https://github.com/communiteq/discourse-tc-fullscreen-coverimage) |
| ❓ | **Install Guide** | [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **New to Discourse Themes?** | [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

Install this theme component

A Discourse theme component that displays a fullscreen cover image over the entire forum on page load.

Originally developed for a government agency (“this site has been seized”), but generic enough for any use case — maintenance notices, splash screens, event announcements, etc.

 ![image](https://global.discourse-cdn.com/meta/original/4X/8/d/a/8da7b0cfb4238ba13be42fd6dc614d1b43213372.jpeg)

## How it works

On page load the image is rendered centred on screen, scaled to fill as much of the viewport as possible while preserving its aspect ratio (`object-fit: contain`). The remaining area outside the image is filled with a configurable background colour.

The overlay disappears when **either** condition is met first:

- the configured number of **seconds** has elapsed, or
- the user has clicked the overlay the configured number of **times**.

Set either value to `0` to disable that dismissal method.

## Settings

| Setting | Type | Default | Description |
| --- | --- | --- | --- |
| `cover_image` | upload | _(none)_ | The image to display fullscreen |
| `trigger_after` | string | _(none)_ | ISO-8601 UTC datetime after which the overlay activates, e.g. `2026-04-01T08:00:00Z` |
| `display_seconds` | integer | `5` | Seconds before auto-dismiss (`0` = never) |
| `dismiss_on_clicks` | integer | `3` | Clicks required to dismiss (`0` = disabled) |
| `background_color` | string | `#000000` | CSS colour for the area outside the image |

## Cookie behaviour

Once a visitor dismisses the overlay (by timer or clicks), a cookie named `tc_coverimage_seen` is set recording the `trigger_after` value. The overlay will not show again until `trigger_after` is changed to a new value — which resets everyone’s seen state and causes it to show again on their next page navigation.

## Example

Set `trigger_after: "2026-04-01T00:00:00Z"`, `display_seconds: 0`, `dismiss_on_clicks: 1` for a single-click splash that activates at midnight UTC on April 1st and each visitor only sees once.

Obviously this theme component was not developed for a government agency but for @WorldIsMine who kindly open sourced it 🥰

---

_[View the full topic](https://meta.discourse.org/t/full-screen-cover-image/399690)._