CODEWITHSUNDEEP
htmlcss
James Patrick
James Patrick

Reputation: 189

Apply -webkit-filter:blur to fullscreen background in HTML tag

I'm trying to apply: 

-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

to my fullscreen background which is defined in my HTML tag. I would prefer to keep the background defined in this tag. I've read other posts that require the background to be defined in the body tag, but I'd ideally rather not overly restructure.

html {
    background: url(../img/footballbg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Any ideas on how to apply to the background, and not the children tags (body, etc)?

Upvotes: 2

Views: 1160

Answers (3)

elboletaire
elboletaire

Reputation: 5357

As said by @climbinghobo, you can't directly apply it to html tag, but you can use the pseudo class ::before to achieve it:

<html>
    <head>
        <style>
        html {
            position: relative;
            min-height: 100%;
        }
        html::before {
            content: " ";
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: url(http://placehold.it/600x400) top left repeat scroll;
            z-index: -1;
            -webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);
            filter: blur(5px);
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
        </style>
    </head>
    <body>
        Heyyy, this text has not been blurred!
    </body>
</html>

You can check it working in this jsfiddle example.

Also, take in mind that the blur effect does not work under firefox yet (at least does not under version < 30.0*). To get it working you'll need to use svg filters:

html::before {
  /* ... */
  -webkit-filter: blur(20px);
  filter: blur(20px);
  filter: url(filters.svg#blur);
}

And the filters.svg (in this case placed under the same folder as the css file) file should contain:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
    </filter>
  </defs>
</svg>

*Update: on latest firefox versions it's working now :) (I'm currently using version 37.0a2)

Upvotes: 1

Shane Hudson
Shane Hudson

Reputation: 719

To actually answer this question, you would need either an element that is absolutely positioned with a negative z-index or a similarly styled pseudo element. That way, you are styling only the background and not the content.

Upvotes: 0

Alon Dahari
Alon Dahari

Reputation: 1147

Your whole page is getting drawn and then the is getting blurred, with all it's children. There's no way around it if you think about it.

For example, if you rotated your html, you'd expect anything in it to be rotated, right? at least then you could rotate it back, but you can't 'un-blur'...

Upvotes: 1

Related Questions