I have a JPEG file that I'm using as a background image for my search page, and I'm setting it up using CSS because I'm working in a Backbone.js context:
background-image: url("whatever.jpg"); I want to apply a CSS 3 blur filter to the background only, but I'm not sure how to style just that element. If I try:
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
Just below background-image in my CSS, it styles the entire page, not just the background. Is there a way to select just the image and apply a filter to it? Alternatively, is there a way to just turn off the blur effect for other elements on the page?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
pen
Eliminates the need for extra elements and adapts content to the flow of the document rather than being fixed/absolute like other solutions.
Use the following methods to achieve:
.content { /* this is needed or the background will be offset by a few pixels at the top */ overflow: auto; position: relative; } .content::before { content: ""; position: fixed; left: 0; right: 0; z-index: -1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); background-size:cover; width: 100%; height: 100%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }EditIf you wish to remove the white border at the edges, use
110%for width and height and-5%for left and top. This will slightly enlarge your background - but there should be no solid color bleeding through the edges. Thanks to Chad Fawcett for the suggestion..content { /* this is needed or the background will be offset by a few pixels at the top */ overflow: auto; position: relative; } .content::before { content: ""; position: fixed; top: -5%; left: -5%; right: -5%; z-index: -1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); background-size:cover; width: 110%; height: 110%; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); }View thispen.
You need to use two different containers, one for the background image and another for the content.
In the example, I created two containers,
.background-imageand.content.They all use
position: fixedandleft: 0; right: 0;for positioning. The difference in their display comes from the differentz-indexvalues set for the elements..background-image { position: fixed; left: 0; right: 0; z-index: 1; display: block; background-image: url('https://i.imgur.com/lL6tQfy.png'); width: 1200px; height: 800px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } .content { position: fixed; left: 0; right: 0; z-index: 9999; margin-left: 20px; margin-right: 20px; }