# 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:** 11
**Page:** 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;
	}
}

```

* * *

---

<div class="post-metadata">

### Author: ![LlamaSensei](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/llamasensei/32/133455_2.png) [@LlamaSensei](https://meta.discourse.org/u/LlamaSensei)
#### Post date: [February 20, 2019, 9:43pm UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/3 "2019-02-20T21:43:44Z")

</div>

I’m using 1920x1080 image & no matter what theme I try using with this component, the image is being stretched. The blur appears to be working fine. Any thoughts on what could cause this?

---

<div class="post-metadata">

### Author: ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [February 21, 2019, 12:54am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/4 "2019-02-21T00:54:38Z")

</div>

Wouldn’t it be easier and faster to simply generate the blurred image and use _that_ as the background? Why have the source JPG at all, plus an extra dependency..?

I guess if you are changing the background dynamically, that’s all I can think of?

---

<div class="post-metadata">

### Author: ![AntiMetaman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/antimetaman/32/186978_2.png) [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [August 13, 2020, 12:45am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/6 "2020-08-13T00:45:31Z")

</div>

I saw this in my logs today:  
 ![image](https://global.discourse-cdn.com/meta/optimized/3X/f/2/f2a6e2849933247ac9b631becd246a255a415f18_2_690x14.png)

StackBlurBackground@[https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?\_\_ws=forum.duelistsunite.org:29:22](https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?__ws=forum.duelistsunite.org:29:22)

start@[https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?\_\_ws=forum.duelistsunite.org:24:32](https://forum.duelistsunite.org/theme-javascripts/7cca6d0005bbe0e73e1acff07a8802eb7ec3a2e3.js?__ws=forum.duelistsunite.org:24:32)

Everything works, so I’m not sure if this a reference error or warning of some kind. I just thought I would report it.

---

<div class="post-metadata">

### Author: ![P2W](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/p2w/32/304345_2.png) [@P2W](https://meta.discourse.org/u/P2W)
#### Post date: [August 23, 2020, 7:28pm UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/7 "2020-08-23T19:28:17Z")

</div>

I tried to implement this but my forum components seem to turn completely transparent and it becomes incredible hard to read the text.

@Johani

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [August 24, 2020, 2:31am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/8 "2020-08-24T02:31:20Z")

</div>

> [@P2W](#):
>
> I tried to implement this but my forum components seem to turn completely transparent and it becomes incredible hard to read the text.

This is sadly still broken, @Johani perhaps if we are not supporting this long term we should just delete this topic ? Happy for you to fix it as well, up to you.

---

<div class="post-metadata">

### Author: ![AntiMetaman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/antimetaman/32/186978_2.png) [@AntiMetaman](https://meta.discourse.org/u/AntiMetaman)
#### Post date: [August 24, 2020, 2:38am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/9 "2020-08-24T02:38:34Z")

</div>

I’m using it on my site and everything seems fine. No problems here. However, I did modify the css a bit. I’ve been using this ever since I got Discourse.

---

<div class="post-metadata">

### Author: ![Firsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firsh/32/454861_2.png) [@Firsh](https://meta.discourse.org/u/Firsh)
#### Post date: [October 12, 2024, 10:19am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/10 "2024-10-12T10:19:34Z")

</div>

Seems promising, but I get:  
Uncaught ReferenceError: assignment to undeclared variable img

```plaintext
          var blur = $("#background_b").data("blur");
          img = new Image();
          c = document.getElementById("background_b");
          ctx = c.getContext("2d");
          w = window.innerWidth;
          h = window.innerHeight;

```

I think you meant to use commas instead of semicolons here.

---

<div class="post-metadata">

### Author: ![HamMan2118](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hamman2118/32/383565_2.png) [@HamMan2118](https://meta.discourse.org/u/HamMan2118)
#### Post date: [October 12, 2024, 10:24am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/11 "2024-10-12T10:24:47Z")

</div>

The plugin has the #broken tag, it won’t work properly. Just so you are aware 🙂

---

<div class="post-metadata">

### Author: ![Firsh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/firsh/32/454861_2.png) [@Firsh](https://meta.discourse.org/u/Firsh)
#### Post date: [October 12, 2024, 10:25am UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/12 "2024-10-12T10:25:23Z")

</div>

I just noticed that, thank you!

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [July 23, 2026, 5:41pm UTC](https://meta.discourse.org/t/stackblur-backgrounds/79344/13 "2026-07-23T17:41:28Z")

</div>