# CSS Help: Blurred Background behind Category/Topic Lists
**URL:** https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370
**Category:** Support
**Created:** [October 11, 2016, 1:34am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370 "2016-10-11T01:34:31Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [October 11, 2016, 1:34am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/1 "2016-10-11T01:34:31Z")
Hello!
I’m currently building a forum that is intended to encompass multiple brands; each brand has a very specific color scheme, which can make it a bit difficult to go with a dark or light theme (one brand is great for the dark theme, but the other brand is much better suited to the light one).
To try and get around this (as I’m not sure how to do category-specific CSS styling yet), I wanted to attempt a more agnostic solution with doing a “blurry” background behind the category and topic lists, using:
`-webkit-filter: blur`
I’ve seen this used elsewhere (quick example):
…And I got pretty close to it working, but need a few extra pointers to getting the blur _behind_ the list instead of in front of them (see my attempt below where I’ve applied the filter to the Categories list but not the Topics list):
Here’s the current CSS I’m using as well (please note that the base of the CSS is to add a shadow behind the list of topics… I Frankenstein things a lot):
```css
//add shadow behind the list of topics, but not categories
.topic-list{
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
background-color: rgba(34, 34, 34, 0.95);
border-collapse: collapse;
}
.category-list{
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
background-color: rgba(34, 34, 34, 0.95);
border-collapse: collapse;
-webkit-filter: blur(10px);
}
```
Any help would be super appreciated; thanks!
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [October 11, 2016, 2:11am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/2 "2016-10-11T02:11:15Z")
For blurred backgrounds you can use:
```CSS
body::after {
content: "";
background-size: cover;
background-image: url(imageurl);
opacity: 0.3;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: fixed;
z-index: -1;
width: 100vw;
height: 100vh;
filter: blur(10px);
}
```
---
### Author:  [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [October 11, 2016, 4:35am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/3 "2016-10-11T04:35:53Z")
> [@LilTrashPanda](#):
>
> -webkit-filter: blur(10px)
Sorry, my photo example wasn’t very helpful; I’ve found a better one that explains what I’m looking for:
What I’d like to achieve is that only the background of the category-list or the topic-list is blurred and the text and everything else “on top” is not affected by the blur. Imagine, for example, if the blurred area in the photo was like the topic-list and could scroll up and down, but would only blur out the background behind the topic-list (and for that matter, not on the sides; you’d be able to see the background clearly there).
Here are links to a couple other examples; there’s CSS included in these, but I just can’t wrap my head around it (and I’m sure my explanation is a bit convoluted as well):
- [Frosting Glass with CSS Filters | CSS-Tricks](https://css-tricks.com/frosting-glass-css-filters/)
- [CSS overlay blur effect - JSFiddle - Code Playground](http://jsfiddle.net/peterbenoit/EppdS/)
- [http://cssdeck.com/labs/blurred-glass](http://cssdeck.com/labs/blurred-glass) (pretty close to what I’m attempting, just imagine wherever those bars go have a blurred background, but it’s only behind the bar)
- [http://www.webdirections.org/demos/translucency/index.html](http://www.webdirections.org/demos/translucency/index.html) (the best one I can find that replicates what I’m attempting, found the write-up here: [Creating iOS 7 effects with CSS3: translucency and transparency – Web Directions](https://www.webdirections.org/blog/creating-ios-7-effects-with-css3-translucency-and-transparency/))
And to be honest, the more I investigate, the more it seems like I’d need to delve into HTML to achieve this affect or have duplicate images (a clear one and a blurred one), and it may not be supported across all browsers. Nonetheless, if there’s a solution to this, I’d love to give it a go!
---
### Author:  [@barryvan](https://meta.discourse.org/u/barryvan)
#### Post date: [October 12, 2016, 3:18am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/4 "2016-10-12T03:18:14Z")
There are ways to do this in a cross-browser fashion, but they’re generally quite hacky and rely on multiple images and/or elements. [Safari supports a `backdrop-filter` property](http://caniuse.com/#search=backdrop-filter) (prefixed with `-webkit-`) – but that’s _only_ on Safari, so no dice for Firefox, Chrome, Edge, etc.
If you want to be cross-browser, and don’t want to have to delve into multiple images/elements and lots of JS running on scroll (which will often result in “janky” behaviour and visuals), you really have two choices: blur the whole image, or, well don’t blur the whole image. 🙂
If you _do_ blur the whole image (which I’d recommend to aid legibility), it’s often a good idea to do this in the image itself, rather than using CSS – blurred images compress down better than highly-detailed images in JPEG, and you can also use a smaller image and scale it up without compromising on the look.
---
### Author:  [@LilTrashPanda](https://meta.discourse.org/u/LilTrashPanda)
#### Post date: [October 12, 2016, 7:01am UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/5 "2016-10-12T07:01:51Z")
Oof, yeah. Thanks for the confirmation!
On the note of adding the blur to the background image, do you know if there’s a way to always align the blur to appear behind the main row? I gave that a shot, but due to different screen resolutions and whatnot, sometimes the blurred area appears too far to the right or left. 😥 Since the background image and the foreground elements seem to be separate, gonna guess that the answer is “nope”, but doesn’t hurt to ask.
Thanks again, everyone, for your assistance and input!
---
### Author:  [@terraboss](https://meta.discourse.org/u/terraboss)
#### Post date: [October 24, 2018, 7:47pm UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/6 "2018-10-24T19:47:45Z")
> [@LilTrashPanda](#):
>
> -webkit-filter: blur
I‘m currently trying to replace the white title bar (.d-header) with a blured one. Unfortunately, my code snippet is also bluring all the buttons and text elements. How can I do it the right way?
```
.d-header{
background: none;
box-shadow: none;
filter: blur(10px);
}
```
Thanks in advance!
---
### Author:  [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 8, 2024, 12:37pm UTC](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370/8 "2024-06-08T12:37:15Z")
This topic was automatically closed after 2797 days. New replies are no longer allowed.