# 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:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![barryvan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/barryvan/32/82635_2.png) [@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")

</div>

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.

---

_[View the full topic](https://meta.discourse.org/t/css-help-blurred-background-behind-category-topic-lists/51370)._