I am trying to apply a CSS blur property to a wrapper div, but don't want to affect my text. With the framework I am using it will be fairly difficult to restructure the html. Is there a way to only blue the background and not text?
HTML Structure
<div class="wrapper">
<h1>Hello World</h1>
</div>
CSS
.wrapper{
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color:red;
}
If anyone could point me into the direction of a solution, if there is one, that would be greatly appreciated.
It's perhaps worth noting that you can't actually blur backgrounds...only elements.
So, a pseudo-element would be the answer here.
.wrapper {
position: relative;
}
.wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
background-color: red;
z-index: -1;
}
<div class="wrapper">
<h1>Hello World</h1>
</div>
Try using .wrapper:before and style its background instead of .wrapper.
This codepen by Matthew Wilcoxson might help.
Related
I'm trying to make my background image blurred.. to then have text, buttons on top of it.. but blur is also blurring the text and buttons and I'm not sure how to separate the two.
header {
background: url("street-238458.jpg") no-repeat center;
-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);
background-size: 100% 100%;
height: 630px;
}
<header>
<div class="container-fluid">
<div class="text-center">
<h1 class="heading">My h1 is here... blah blah</h1>
<p>We help people out, every day.</p>
<button class="btn btn-lg btn-danger heading" href="#">This is the button</button>
</div>
</div>
</header>
You can have 2 different containers for your header, so you can style the background container without affecting the content. Check out the reference in the comments.
This pen should be what your looking for. Credit to respective owner.
The trick is to have two separate containers, the outer container should have background image.
.content:before {
content: "";
position: fixed;
left: 0;
right: 0;
z-index: -1;
display: block;
background-image: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
I'm trying to use a css blur filter while maintaining the opacity of an image. In the example below I have an image that is just a blue square. When I apply a blur filter the edges end up becoming transparent and you can see the black div underneath. Is there any way to apply blurring without this transparency being introduced? Ideally, I would want it to only include visible pixels inside of the span in the averaging. I understand that in this example it would result in just a solid blue square but for less trivial cases it would give the result that I'm looking for.
div {
background-color: black;
width: 100px;
height: 100px;
}
span {
overflow: hidden;
-webkit-filter: blur(30px);
display: block;
}
<div>
<span>
<img width="100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png">
</span>
</div>
img {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
margin: -5px -5px -5px -5px;
}
div {
display: inline-block;
overflow: hidden;
}
http://jsfiddle.net/serGlazkov/nv6evzmk/
Try to look here:
How to apply a CSS 3 blur filter to a background image
https://css-tricks.com/almanac/properties/f/filter/
http://www.inserthtml.com/2012/06/css-filters/ <---- (I think this is very similar to what you are looking for.)
I am trying to apply the CSS blur property only to the background-image of with id="home", but it also reflects in children class too. My HTML code is:
<section id="home">
<div class="home">
<h1>ncats is an innovative</h1>
</div>
</section>
My CSS code is:
#home{
display: block;
background:url(../images/2.jpg) no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100%;
height: 1080px;
}
.home{
text-align:center;
}
I'm trying to get an output like in the below link:
http://codepen.io/akademy/pen/FlkzB
But my output is like this, instead: http://codepen.io/anon/pen/yyEZOb
I got your Codepen to work with the following CSS:
#home:before{
content: ""; /* CHANGE HERE! */
position: absolute; /* CHANGE HERE! */
z-index: -1; /* CHANGE HERE! */
display: block;
background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100%;
height: 1080px;
}
.home{
text-align:center;
z-index: 0; /* CHANGE HERE! */
}
Add the ':before' pseudo-element to specify that content be inserted before the element selected (#home).
Setting position to absolute and changing the z-indices are important here since we have to do some rearranging of the elements.
More info about :before pseudo-element
https://developer.mozilla.org/en-US/docs/Web/CSS/::before
More info about z-index:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
To get the output like the codepen you shared, you have to use the same technique and use a pseudo element like :before or :after.
Just change your CSS as follows:
#home:before{
content:'';
display: block;
background:url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
width: 100%;
height: 1080px;
position: absolute;
top: 0;
left: 0;
z-index:-1;
}
Perhaps you could use the opacity related property instead of the webkit-filter option:
#home{
display: block;
background:url('imageurl') no-repeat;
background-size: cover;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
width: 100%;
height: 1080px;
}
Actually you need to understand the block structure of HTML div. Whatever you apply to a parent element or parent division also get applied to the child.
So if this is your code
<div class="parent">
Hi...
<div class="child">
i am child
</div>
</div>
Now if you apply css filter:blur property to parent class it will too effect to the child class, as the parent class/div block contains the child class/div block inside it. So whatever you give to parent also get adopted by child.
But there is still a way this is how you can do : JSFiddle.
Explanation: There is one div with child as span and the other span as separate element. This div is given blur so it's child would also get affected, but the separate span is not because it's not the child of that div.
HTML
<div class="bg">
<span class="inner">
<h1>Hey i am normal text above the Background, and i am "Blur" ! </h1>
</span>
</div>
<span class="outer">
<h1>Hey i am normal text above the Background, and i am not "Blur" ! </h1>
</span>
CSS
html, body {
color:white;
margin:0%;
position:relative;
background:black;
}
.bg {
margin:0%;
background-image:url(http://upload.wikimedia.org/wikipedia/commons/1/12/Sling-Sat_removing_space_debris.png);
background-repeat:no-repeat;
background-size:cover;
height:100%;
width:100%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
z-index:-1;
}
.inner {
z-index:0;
display:block;
width:100%;
height:100%;
position:fixed;
top:0%;
overflow:auto;
text-align:center;
-webkit-filter: blur(0px);
-moz-filter: blur(0px);
-o-filter: blur(0px);
-ms-filter: blur(0px);
filter: blur(0px);
}
.outer {
z-index:0;
display:block;
width:100%;
height:100%;
position:fixed;
top:0%;
overflow:auto;
text-align:center;
padding-top:50px;
}
For future readers (and present ones, who don’t particularly care about cross-browser support): there is a CSS mechanism that does exactly this.
In the Filter Effects spec, filters are defined to also work as a functional notation, accepting an image + a list of filters. The syntax looks like this:
.El {
background-image: filter(url(myImage.jpg), blur(5px));
}
...where the second argument to the filter function accepts a list of filters (the same as the filter property).
Sadly, only Safari has implemented it so far—it was released as -webkit-filter() in Safari 9, but had some serious bugs so they didn't even announce that it was supported. It's fixed in WebKit since, and due to be released in the next version of Safari (iOS 9.3/Desktop Safari 9.1).
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)?
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'...
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)
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.
I have a div element inside and above all other content in the body of a HTML page. It has the ID 'background'.
<body>
<div id="background"></div>
<!-- The rest of the page is below #background -->
</body>
The reason the background has its own div and is not simply part of the body is because I have applied a few animations to the background upon load and I don't want these to be reflected on the other elements inside the body.
The CSS for the background div looks like this:
#background {
position: absolute;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(backgrounds/moon.png) no-repeat center center fixed;
filter: blur(7px) brightness(0.75);
-webkit-filter: blur(7px) brightness(0.75);
-moz-filter: blur(7px) brightness(0.75);
-ms-filter: blur(7px) brightness(0.75);
-o-filter: blur(7px) brightness(0.75);
}
To save confusion I have removed the animation CSS as that is not the cause of the problem.
The result of the above HTML and CSS looks like this:
(You might want to open the image in a new tab to see the edge blur clearer)
Around the edge of the image you will see that where they are blurred the white background starts coming through giving it an inner-glow effect. I am trying to remove this to essentially leave the image blurred but maintain sharp edges.
I would highly appreciate anyone helping me around this as it's been holding me back for quite some time. I am also aware there are a few other questions similar to this one, however I hope to have made the problem clearer and I am also using a different method of applying the background (absolute div).
JSFiddle: http://jsfiddle.net/nvUKT/
You could cut the edges off, as is done here.
Basically make the image go outside of the view on all sides (perhaps define the left/right/top/bottom or width and height?) and you won't see the glowing edge.
You shouldn't need the overflow:hidden because you are using absolute positioning.
Edit
So, it isn't exactly the most elegant solution, but what you can do to get rid of the blurred edges is to define two background divs, one blurred, and one not. The non-blurry image underneath the blurry one will get rid of the weird edge, and it won't increase the number of HTTP requests, because it's the same image.
HTML
<div id="behind"></div>
<div id="background"></div>
CSS
#behind, #background {
position: absolute;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
}
#background {
filter: blur(7px) brightness(0.75);
-webkit-filter: blur(7px) brightness(0.75);
-moz-filter: blur(7px) brightness(0.75);
-ms-filter: blur(7px) brightness(0.75);
-o-filter: blur(7px) brightness(0.75);
}
JSFiddle
To do this in a single <div> you can use the :before and :after CSS selectors, duplicating the background image and only blurring the front-most one. This works well for full-div blurred background images.
.background-image:before, .background-image:after {
background:
url("http://placehold.it/1920x1080")
no-repeat
fixed
center top;
background-size: cover;
position: fixed;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
.background-image:before {
z-index: -2;
}
.background-image:after {
z-index: -1;
-webkit-filter: blur(7px) brightness(0.75);
-moz-filter: blur(7px) brightness(0.75);
-ms-filter: blur(7px) brightness(0.75);
-o-filter: blur(7px) brightness(0.75);
filter: blur(7px) brightness(0.75);
}
To avoid duplicating divs, you can do the image bigger than its container, and located it before 0.0.
So:
#background{
position: absolute;
top: -10px;
left: -10px;
background: url(backgrounds/moon.png) no-repeat;
background-size: cover;
width: 102%;
height: 102%;
filter: blur(7px) brightness(0.75);
-webkit-filter: blur(7px) brightness(0.75);
-moz-filter: blur(7px) brightness(0.75);
-ms-filter: blur(7px) brightness(0.75);
-o-filter: blur(7px) brightness(0.75);
}
Another option if you wish to avoid creating additional divs is to apply a transform: scale() to the #background element and overflow: hidden to the body or parent element:
body {
overflow: hidden;
}
#background {
position: absolute;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: url(http://placehold.it/1920x1080) no-repeat center center fixed;
filter: blur(7px) brightness(0.75);
-webkit-filter: blur(7px) brightness(0.75);
-moz-filter: blur(7px) brightness(0.75);
-ms-filter: blur(7px) brightness(0.75);
-o-filter: blur(7px) brightness(0.75);
transform: scale(1.05);
}
JS Fiddle