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.
Related
I have a onepager-scrolldown website with a fullscreen header-image followed by several sections. Now, I decided to apply background-images to some of the sections. To make clear what structure I have, here is a simple code sample with the header followed by one section:
HTML:
<body>
<header></header>
<section class="bg-test">
<div class="container">
<div class="row">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</section>
</body>
CSS:
html,
body {
height: 100%;
width: 100%;
}
header {
position: relative;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center top;
background-image: url('../img/header.jpg');
}
.bg-test {
background-image: url('../img/header.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
Now I would like to add filter properties (such as a blur filter) to the background-image of the section (obviously only to the image and not to the text in front of the image). In order to achieve that, I tried to follow the approaches in this topic:
How to apply a CSS3 Blur Filter to a background image
I tried to adapt the code samples to my situation (only section instead of whole page), however couldn't make it work. I believe it is due to the interaction with the fixed header image.
Would someone be so kind and help me out with that? Thank you!
You can add the background on the :before, and put that behind the content:
.bg-test {
position:relative;
background:none;
}
.bg-test:before {
content:"";
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
/* Add Blur */
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
/* Background */
background-image: url('../img/header.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
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'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