Grayscale Change When Amending CSS - html

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.

Related

Background-size: cover not clearly display on Iphone

Good day!
This line of CSS Code is working fine using the other browser. But whenever I tried to run the code using safari. The image doesn't show nicely. Some thread said explains that I must use media query for iPhone: Example code below of Iphone Media Query
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
But that code doesn't work properly. Can anyone help me how can I fix this?
This is my Code:
#video {
background: url("images/sample_8.jpg");
-webkit-background-size: cover;
background-size: cover;
background-repeat:no-repeat;
background-position: center;
background-attachment:fixed;
position: relative;
color: #999;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

You can try background-size:contain; for iphone:
#media (max-width: #iphone-screen) {
background-size:contain;
}

Apply filter to a section background image

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;
}

Background image still issue on php htdocs after every tries

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.

How to remove white border from blur background image

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

How to place an image beneath a semi-transparent layer?

I know this has been asked before but I can't find a solution that works!
My site contains a green background with a form in the center of it. You can view the jsFiddle here I simply want the image found here to be placed beneath the green layer you see. The image shouldn't be stretched - just simply fill the green layer with like 50% opacity.
The code that produces the green layer currently is:
#mainarea {
height:900px;
background: #2ecc71 no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#mainarea::before {
z-index: -1;
content: '';
position: fixed;
top: 0;
left: 0;
background: white;
/* IE Fallback */
background: white;
width: 100%;
height: 100%;
}
Thanks for your help!

I have done some editing : check this http://jsfiddle.net/h6ckedw6/2/
added a new div for image
.bg{
background:url(http://40.media.tumblr.com/9ba0ef66d65ee159bd1d8623964ffc8f/tumblr_njqrueR0gx1tkairwo1_1280.jpg) no-repeat top left;
background-size:cover;
width:100%;
height:900px;
position:fixed;
z-index:-1;
}

you can get that effect by setting its background
checkout below link
http://jsfiddle.net/h6ckedw6/5/background-color:rgba(2,236,199,0.5);

a sampler solution , you can applay the color you want on the image using photoshop or any other image editor and play with the opacity then use background-image like so :
#mainarea {
height:900px;
background: #2ecc71 no-repeat center center fixed;
background-image: url(http://s2.postimg.org/cp3x1a0w9/tumblr_njqrue_R0gx1tkairwo1_1280.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Roboto";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
link to the modified image
Live Demo