I have a JPEG file that I'm using as a background image for a search page, and I'm using CSS to set it because I'm working within Backbone.js contexts:
background-image: url("whatever.jpg");
I want to apply a CSS 3 blur filter only to the background, but I'm not sure how to style just that one element. If I try:
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
just underneath background-image
in my CSS, it styles the whole page, rather than just the background. Is there a way to select just the image and apply the filter to that? Alternatively, is there a way to just turn the blur off for every other element on the page?
Best Answer
Check out this pen.
You will have to use two different containers, one for the background image and the other for your content.
In the example, I have created two containers,
.background-image
and.content
.Both of them are placed with
position: fixed
andleft: 0; right: 0;
. The difference in displaying them comes from thez-index
values which have been set differently for the elements.Apologies for the Lorem Ipsum text.
Update
Thanks to Matthew Wilcoxson for a better implementation using
.content::before
https://codepen.io/akademy/pen/FlkzB