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
Related
I've tried all the syntax but the issue remains the same:
#body
{
position: relative;
}
#body::before
{
background: url(http://hirem.edu.vn/asset/client/images/bg1.jpg) no-repeat center center fixed;
content: '';
z-index: -1;
width: 100%;
height: 100%;
position:absolute;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
The above code is working just for one php file when I use this code on other css with other id like bg, background instead of body id. The code didn't work. Just working for one php and css. I just changed the id name nothing more.
I've tried:
background-image: url("../img/etc.jpg")
background:url(http:etc/etc/jpg)
background-image:url("/img/etc.jpg")
Everything. Before converting into PHP extension. It was working fine with all .html file not for one.
I am trying to change my background to grayscale, but not the title or description on top of it.
I am using Drupal as a CMS, and amending the CSS files in the directory. The theme is Color Glass. I did originally open this in Drupal Stack Exchange, but it was closed and I've been advised to open it in normal Stack Exchange.
This is the section of code in question:
.home-welcome {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
font-family: roboto;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.home-welcome .main-title {
margin-top: 145px;
font-size: 10em;
font-family: roboto;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
.home-welcome .main-desc {
margin-top: 5px;
font-size: 1.5em;
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
The weird thing is, that if I do the background-image colour, and the description and title in grayscale, that works. Just not the other way around.
I have also tried using filter: none, but that doesn't work either.
http://www.ubereadoolische.com/drupal3/
If I could change my html then I could follow the instructions on http://codepen.io/aniketpant/pen/DsEve - but it has to be a CSS amendment, as I can only change the CSS in Drupal (the code is written in PHP which I do not understand). There is no way for me to amend the HTML.
Can anyone help?
Thanks James
ps Please ignore my utterly incomplete site.
I think you can make it work with your current HTML structure. There is already a div present in your structure (.bkg-overlay), which you can use for your background image. I tested the following successfully in Chrome:
.home-welcome {
font-family: roboto;
min-height: 650px;
position: relative;
}
.bkg-overlay {
background-image: url(images/css-header-header-amic-main-background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
min-height: 650px;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-moz-filter: grayscale(100%);
position: absolute;
width: 100%;
z-index: -1;
}
As you can see, most of your CSS code which was originally applied to .home-welcome is now applied to .bkg-overlay. The .home-welcome div is, position-wise, now the reference for its children divs (position: relative), so the .bkg-overlay can be placed on top of it by applying position: absolute. Last, the .bkg-overlay div is told to appear below every other div by setting a negative z-index: z-index: -1.
How to remove the white blur border from the background image.
<div class="background-image"></div>
CSS, i tried adding margin:-10px but it doesn't work
.background-image {
background: no-repeat center center fixed;
background-image: url('http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg') ;
background-size: cover;
display: block;
height: 100%;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
z-index: 1;
margin:0px auto;
-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;
}
http://jsfiddle.net/maio/8wq132nd/1/
The simplest way to do it is by adding transform: scale(1.1).
Try it here.
#overlay {
position: fixed;
left: 22.5em;
top: 3em;
height: 75%;
width: 50%;
background: url("https://s-media-cacheak0.pinimg.com/originals/ae/b4/c5/aeb4c53cab2b550187644af503a0f17e.png");
background-size: cover;
filter: blur(9px);
transform: scale(1.1);
}
Up-to-date answer (2022)
You can achieve this effect with just css by using backdrop-filter on an overlaying element.
.blurred::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(10px); /* apply the blur */
pointer-events: none; /* make the overlay click-through */
}
.blurred {
position: relative;
width: 500px;
height: 300px;
background: no-repeat center center;
background-image: url('https://besthqwallpapers.com/Uploads/26-5-2019/94041/thumb2-tesla-model-x-2019-exterior-front-view-new-gray-model-x.jpg');
background-size: cover;
}
<div class="blurred"></div>
Update (8-8-2022): This is now also fully supported in Firefox
I have added overflow, padding and even margin, but still the problem not solved. So i tried to give the image tag between div. Problem solved.
<div class="background-image">
<img src="http://www.hdpaperz.com/wallpaper/original/windows-8-wallpapers-2560x1600-2311_1.jpg" width="100%" height="100%"/>
</div>
css
.background-image {
background: no-repeat center center fixed;
background-size: cover;
display: block;
left: -5px;
top:-5px;
bottom:-5px;
position: fixed;
right: -5px;
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;
margin:-5px;
}
js fiddle
http://jsfiddle.net/2pgdttLh/
This worked for me:
Added two fixed images, one with z=-1, other with z=0, blurred the first one.
Use a SVG-Blur filter.
filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='4' result='b'/%3E%3CfeMorphology operator='dilate' radius='4'/%3E %3CfeMerge%3E%3CfeMergeNode/%3E%3CfeMergeNode in='b'/%3E%3C/feMerge%3E%3C/filter%3E %3C/svg%3E#a");
"stdDeviation" is your intensity.
source
I added a negative margin to the container: margin: -5px
Here's a function I settled on based on #Prime 's answer.
In order for it to work the image must be positioned inside a <div/> having the width and height of the image (explicitly set).
function addBlur(style, radius) {
return {
...style,
// https://caniuse.com/#feat=css-filters
filter: `blur(${radius}px)`,
// Works around the white edges bug.
// https://stackoverflow.com/questions/28870932/how-to-remove-white-border-from-blur-background-image
width: `calc(100% + ${2 * radius}px)`,
height: `calc(100% + ${2 * radius}px)`,
marginLeft: `-${radius}px`,
marginTop: `-${radius}px`
}
}
The blur adds transparency around the edges, so all you need to do is remove the alpha channel.
Here are a couple of examples of how to do this with SVG filters.
<filter id="omega"><feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1"/></filter>
<filter id="omega"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>
You can implement blur immediately in the SVG filter, or add a filter to remove transparency after the blur
filter: blur(50px) url(#omega);
or pure CSS
filter: blur(50px) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="a"><feComponentTransfer><feFuncA type="linear" slope="10"/></feComponentTransfer></filter>#a');
If the white borders are caused by the background color of the body, apply margin: 0; on body since margins are not 0 by default;
padding: 10px 10px;
add this in your css to remove the white blur border for bottom
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.