FANDOM


BlurBackground adds blur to the background. The browser support is relatively poor in the IE-Edge side, but you probably shouldn't expect everything to work if you're using IE anyways. It will just show a non-blurry image.

Code

body::before {
    content: '';
    background-image: url(image-url);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

The blur effect should usually be limited to 2-5px. In case body already has a background defined, you can always remove it with:

body {
    background-image: none !important;
}

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.