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);
}
Related
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
.content {
float: left;
width: 100%;
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
}
.info {
float: left;
margin: 100px 0px 0px 30px;
width: 410px;
}
<div class="content">
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>
If I do not want to blur the button, what do I need to do?
When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.
There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.
Example:
#parent_div {
position: relative;
height: 100px;
width: 100px;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}
<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>
If you see the background masking over the content, then use the z-index property to send the background behind the second content div.
How to disable blur on child element?
.enableBlur>* {
filter: blur(1.2px);
}
.disableBlur {
filter: blur(0);
}
<div class="enableBlur">
<hr>
qqqqq<br>
<span>qqqqq</span><br>
<hr class="disableBlur">
<div>aaaaa</div>
<div>bbbbb</div>
<div class="disableBlur">DDDDD</div>
<hr>
<img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
<img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>
My solution seems a bit simpler but may have some compatibility issues. I just used backdrop-filter with the blur filter.
backdrop-filter: blur(2px);
Just create two divisions and adjust their z-indexes and margins such that the division you want to blur lies below the division you want to appear on top.
PS: Don't create division inside a division cause the child inherits the parent's properties.
#forblur {
height: 200px;
width: 200px;
background-color: blue;
margin: auto;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px) -ms-filter: blur(3px);
filter: blur(3px);
z-index: -1;
}
#on-top-container {
margin: auto;
margin-top: -200px;
text-align: center;
height: 200px;
width: 200px;
z-index: 10;
}
<div id="forblur">
</div>
<div id="on-top-container">
<p>TEXT</p>
</div>
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.
This question already has answers here:
How to apply a CSS filter to a background image
(22 answers)
Closed 2 years ago.
.content {
float: left;
width: 100%;
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.opacity {
background-color: rgba(5, 98, 127, 0.9);
height: 100%;
overflow: hidden;
}
.info {
float: left;
margin: 100px 0px 0px 30px;
width: 410px;
}
<div class="content">
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>
If I do not want to blur the button, what do I need to do?
When using the blur or opacity property, it is not possible to ignore the child element. If you apply either of those properties to parent element, it will automatically apply to child elements too.
There is an alternate solution: create two elements inside your parent div – one div for the background and another div for the contents. Set position:relative on the parent div and set position:absolute; top:0px; right:0px; bottom:0px; left:0px; (or set height/width to 100%) to the child element for the background. Using this method, the content div will not be affected by properties on the background.
Example:
#parent_div {
position: relative;
height: 100px;
width: 100px;
}
#background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
filter: blur(3px);
z-index: -1;
}
<div id="parent_div">
<div id="background"></div>
<div id="textarea">My Text</div>
</div>
If you see the background masking over the content, then use the z-index property to send the background behind the second content div.
How to disable blur on child element?
.enableBlur>* {
filter: blur(1.2px);
}
.disableBlur {
filter: blur(0);
}
<div class="enableBlur">
<hr>
qqqqq<br>
<span>qqqqq</span><br>
<hr class="disableBlur">
<div>aaaaa</div>
<div>bbbbb</div>
<div class="disableBlur">DDDDD</div>
<hr>
<img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
<img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">
</div>
My solution seems a bit simpler but may have some compatibility issues. I just used backdrop-filter with the blur filter.
backdrop-filter: blur(2px);
Just create two divisions and adjust their z-indexes and margins such that the division you want to blur lies below the division you want to appear on top.
PS: Don't create division inside a division cause the child inherits the parent's properties.
#forblur {
height: 200px;
width: 200px;
background-color: blue;
margin: auto;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px) -ms-filter: blur(3px);
filter: blur(3px);
z-index: -1;
}
#on-top-container {
margin: auto;
margin-top: -200px;
text-align: center;
height: 200px;
width: 200px;
z-index: 10;
}
<div id="forblur">
</div>
<div id="on-top-container">
<p>TEXT</p>
</div>
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 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