# StackBlur backgrounds

**URL:** https://meta.discourse.org/t/stackblur-backgrounds/79344
**Category:** Theme component
**Tags:** broken
**Created:** [January 30, 2018, 6:27am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344 "2018-01-30T06:27:31Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [January 30, 2018, 6:27am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/1 "2018-01-30T06:27:32Z")

</div>

⚠ This is **not** supposed to be used as a theme by itself.

This is a theme component that’s supposed to handle the background only. It’s supposed to be incorporated into your theme design.

* * *

> Repo: [GitHub - hnb-ku/StackBlur-backgrounds-discourse-theme-component · GitHub](https://github.com/hnb-ku/StackBlur-backgrounds-discourse-theme-component)

This component uses [Mario Klingemann](https://github.com/flozz)’s [StackBlur](https://github.com/flozz/StackBlur) library (`2kb` gzipped - [MIT license](https://github.com/flozz/StackBlur/blob/master/LICENSE)) to generate **high scroll performance** blurred backgrounds based on an image you select in a `<canvas>` element.

Examples: (these are compressed so they have artifacts - the backgrounds are smooth)

If I use this photo:

 ![beach-background-7](https://global.discourse-cdn.com/meta/original/3X/0/d/0db91f0d7d1f2b4c8d6af61c988093a0bb89461e.jpg)

Then the resulting Discourse background would look like this:

 ![Discourse blurred background](https://global.discourse-cdn.com/meta/original/3X/f/1/f1763d22d88e3c9b530ec3c7db5bf9e93420fb13.jpg)

And on mobile

 ![Discourse blurred background mobile](https://global.discourse-cdn.com/meta/original/3X/c/6/c669b9a4be8fe48d5781523acc44c01ed8c5ebad.PNG)

More samples with other images:

 ![Discourse blurred background](https://global.discourse-cdn.com/meta/original/3X/0/e/0e65f1ed207a55e0e51bb79110d7f673be1ce909.jpg)

 ![Discourse blurred background](https://global.discourse-cdn.com/meta/original/3X/d/d/dd9dff376055201ee373afb364ea3e5c60f9f175.jpg)

The quality of the image you use does not really matter because the blur is very forgiving so I recommend highly compressed jpgs no larger than 1080p - All you want is the colors.

* * *

# Installation

Install the repo as you would with any other theme component:

> [@Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682):
>
> bookmark This is a guide for installing and managing themes and theme components in Discourse. person_raising_hand Required user level: Administrator Installing and customizing themes can significantly improve the look and feel of your Discourse site. You can easily import and manage themes and their components through the Discourse admin panel. This guide covers: Importing new themes and theme components Adding theme components to a theme Managing automatic updates Additional resourc…

Once that’s done follow these steps:

1- Create a new theme  
2- Name it whatever you want  
3- Add this in the **common header** section:

```plaintext
<canvas 
id="background_b" 
data-src='BACKGROUND_URL_GOES_HERE'
data-blur="BLUR_AMOUNT" 
></canvas> 

```

4- Change `BACKGROUND_URL_GOES HERE` to the url of your image  
**(Has to be either hosted on your domain or on a domain with correct [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) set up)**

5- Change `BLUR_AMOUNT` to the desired amount of blur **(0 - 180)** higher means more blur.

5- Add StackBlur backgrounds as a theme component under your newly created theme.

* * *

# ⚠ Important

The demo samples use the “Simple Dark” color scheme

You may have noticed the slight dark background behind the topic list.

**This is not a part of the theme component**

That is achieved with the the following CSS:

```plaintext
#main-outlet {
    background: rgba(0, 0, 0, .5);
    padding-left: 2em;
    padding-right: 2em;
}

```

Also, the default mobile theme adds a solid color background to the `<body>` element so you would need to remove that if you want the blurred background to show on mobiles. You can do that like so:

```plaintext
.mobile-view {
	body {
		background: none;
	}
}

```

* * *

---

_[View the full topic](https://meta.discourse.org/t/stackblur-backgrounds/79344)._